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Welcome 



WELCOME 


EDITOR’S NOTE 


O There’s more to learning from net than 
just reading our practical articles. Many 
of the projects come with screencasts created 
by our authors. So you can read the article, check 
out the code on GitHub or CodePen, then sit back 
and watch it all in action on YouTube. 

This issue we have more than two hours of 
video tutorials for you! James Steinbach walks 
you through how to switch from CSS to Sass in 
WordPress, Aaron Gustafson explains patterns for 
simple, accessible forms, Jon Bell introduces Pixate, 
and Lukas Ruebbelke demonstrates how to build a 
real-time leaderboard with Firebase and AngularJS. 
And that’s not all. Flip to page 96 for a free course 


about deploying websites, courtesy of Ryan Irelan’s 
Mijingo ( mijingo.com/pwducts), which offers great 
video tutorials for web designers and developers. 
Deploying Websites (usually $14.99) covers seven 
popular methods to get your work on the web, 
from FTP to Capistrano. 

Finally, we have a free one-month membership 
to SketchCasts ( sketchcasts.net ), a growing library 
of video tutorials all about Sketch. Turn to page 80 
for details. Enjoy! 

Oliver Lindberg, editor 
oliver.lindberg(g)futurenet. com 
@oliverlindberg 


VAL 

HEAD 



Val is a designer who loves 
web animation. On page 68 
she explains how to create 
amazing interface animations 
w: valhead.com 
t: (a)vlh 


FEATURED AUTHORS 


RAFAEL 

CONDE 


PALL 

BOAG 




Rafael is the co-founder 
of SketchCasts. On page 
76 he runs down his top 
15 handy Sketch plugins 
w: rafaelconde.net 
t: (cprafahari 


Paul is a digital consultant, 
speaker and author. On page 
28 he argues that good UX 
design starts in the boardroom 
w: boagworld.com 
t: (a)boagworld 


AARON 

GUSTAFSON 



Aaron is a progressive 
enhancement evangelist. Turn 
to page 98 to find out how to 
improve your HTML forms 
w: aaron-gustafson.com 
t: (a)aarongustafson 
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CHRISTMAS 

TIMEWARP 

The most incredible thing just 
happened today. I was walking 
with my dog and near our 
building, on a bench, there 
was a .net magazine issue #5 
from April 1995! What are the 
odds when just yesterday I got 
an email from net saying it’s 
celebrating its 20th year. All 
of that just happened here in 
Tel Aviv, Israel! It is a small 
world. Here is a photo of my 
girlfriend and .net issue #5 
April 1995 [on the right]. 

Liran Tadmor, Tel Aviv, Israel 
Wow. This is amazing! And 
what a magical Christmas 
surprise (Liran found the 
copy on Christmas Day)! 

We hope you enjoyed the 
issue, even though it’s 20 
years out of date. Shall we 
send you a new copy? When 
you’re done with it, leave it 
on the bench and maybe in 


20 years we’ll get another 
email from someone! 

OMG! OMG! 

Inspirational site of the 
month: Vesper. OMG please ... 
Inspirational should mean just 
that or have they redefined 
the word inspirational as lazy, 
awkward, bland. Don’t get me 
wrong it’s not the worst site 
I’ve seen, but inspirational it’s 
not. Whiting out images for 
alignment purposes. Heading 
creeping under images when 
viewed on smaller devices 
(KindleHD Silk). The oversized 
buttons when viewed on 
laptop. The clunky sunset 
sunrise section. Plus OMG I 
actually wrote OMG and three 
times I must be pis*%d. 

Doug Ferron, UK 
Err ... OK. Doug doesn’t 
seem to agree with Chris 
Allwood’s choice for the Site 
of the Month in the Gallery 
of issue 263, vesperhotel.com , 
as designed by Digital 
Natives. Of course it’s very 
subjective - but also 
remember the golden rule: 
once intoxicated, step away 
from social media and email! 

^1 

EXPRESSION 

ENGINE 

I’m a regular reader of your 
magazine and often find the 
features and projects you 


publish of great use. Do you 
have any plans on featuring 
ExpressionEngine as a CMS 
project or feature? I have seen 
regular features on WordPress 
and was wondering whether 
EE was a possible option too? 
There are plenty of areas 
that could be covered, such 
as DRY templating using its 
native layout tags, or Mark 
Croxton’s Stash? Or maybe 
their extensive add-ons and 
extension library. 

just a thought, it’s such 
a powerful CMS with a great 
community, and would be 
great to feature. 

Scott Harrington, Essex, UK 
Good point, Scott! You’re 
right, we haven’t covered 
ExpressionEngine ( netm.ag 1/ 
espression-265) in a while. 


The rebranding of the 
ExpressionEngine podcast 
and the disappearance of 
various events dedicated 
to ExpressionEngine seems 
to suggest it’s not as popular 
as it was maybe three or four 
years ago. What do other 
readers think? Would you be 
interested in reading more 
ExpressionEngine tutorials? 
Let us know. 

CORRECTION 

In our cover feature on the 
‘Top 10 web design tools for 
2015’ in the February issue 
(263), we inadvertently 
mixed up the screengrabs for 
Affinity Designer and Marvel. 
Apologies to both companies! 
We blame the Christmas rush 
and too much mulled wine. 



Blast from the past Liran Tadmor found this 1995 issue of .net (complete with 
Andy Warhol as our suprising cover star) on a park bench in Tel Aviv 
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Network 


HOW MANY DOMAIN 

NAMES DO YOU OWN? 


None 1% 

I forgot to renew. Doh! 


One 22% 

All I need is a .com 
for myself 


Two to five 31 % 

I'd like to do a few 
side projects 


Six to 10 15% 

When buying a domain 
I go for .co.uk, .com, .biz 
- all of the biggies 



11 to 25 16% 

We've grown, diversified 
and push keyword 
searches back to our 
primary domain 

26 to 50 7% 

I own more businesses 
than Lord Sugar 


51 to 100 2% 

Pigfruit.co.uk and 
weaselstains.com will 
be worth millions 


More than a hundred 5% 

I'm a broker. Talk to me 
and we can do a deal 


From our timeline 

What’s the most interesting domain you 
own, and what are you hoping to do with it? 



I bought shitpubs.co.uk 
a couple of years ago. 
No idea why. 

@SteveGrant1983 

I have websnacks.co.uk 
- still don't know what 
to do with it! 

@plastic_fuzz 

isbawsaqoniine/et. com. 

I haven't even been 
bothered enough to put 
a simple "NO!" page together! 

@martinbean 




Still haven't made my 
) meat preference dating 
site with 
wouldliketomeat. com 

@ChrisYaxley 

O inspirationaldigital. co. uk 
- it had a nice ring to it 
so we snapped it up! 

@oomagnitude 

uselesswoodentoy.com. 
Build a skateboarding 
site mecca 

@DevelopSean 



I own www.baconkitty. 
co.uk. It's actually a 
HTML5, CSS3 and 


jQuery side project I've been 
working on for far too long now! 

@mwdesigner 



I never could get it, 
but I wanted to buy 
wickedcards.com. An 
e-card service for innapropriate 
occasions (e.g. colonoscopies). 
@egandalf 


» l owned ispiersmorgan 
atwat.com. The answer 
was always yes. 

@stevebalderson 


COOL STUFF 
WE LEARNED 
THIS MONTH 

MICROSOFT SPARTAN 

When Google built 

a browser it named 
it Chrome, after that 
decorative guff on cars. 
Now Microsoft is following 
suit. It is hoping to deliver 
a sparse and streamlined 
affair, and so has dubbed 
its new window on the 
web Spartan. Under the 
tunic, Spartan promises a 
whole new render engine. 
netm.ag/spartan-265 

LEARN BY WATCHING 

We tend to think 

that learning new 
things should require 
lots of blood, sweat and 
tears. However, freelance 
designer and developer 
Tom Kenny reckons we 
can learn a lot by simply 
watching the experts. 

Here, he reasons through 
how the brain works and 
offers tips on how to 
observe more keenly. 
netm.ag/inspect-265 

NAIL PUBLIC SPEAKING 

I Public speaking 

is about as much 
fun as receiving root 
canal surgery from a 
hungover Berserker, on 
a rollercoaster. As such the 
web is groaning with tips 
for conquering your fears. 
This particular All-purpose 
guide' is fantastically well 
written; a must-read for 
anybody tempted to hit the 
conference circuit. 
netm.ag/speak-265 
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EXCHANGE , 

Send your questions to netmag@futurenet.com / industry e 


Practical 
advice from 
industry experts 


THIS MONTH FEATURING... 

sara mum 

Sara is a frontend 
developer, writer and 
speaker from Lebanon 
w: sarasoueidon.com 
t: (cDSaraSoueidan 

JASON LENGSTORF 

Designer and developer 
Jason is spending 2015 
traveling through Europe 
w: lengstorf.com 
t: @jlengstorf 


LARA HOGAN 

Lara is the senior 
engineering manager 
of performance at Etsy 
w: larahogan.me 
t: @lara_hogan 

LUCASZ ZELENZY 

Lukasz is the head 
of organic acquisition 
at uSwitch.com 
w: uswitch.com 
t: @LukaszZelezny 






lEUjUESTION OF THE MONTH 


What are your tips for workflow across 
distributed teams? 

Madeleine White, Staunton, UK 



Distributed teams Tools like Trello (above) can help promote clear and effective communication 

JL: In distributed teams, the need for well-defined expectations cannot be 
overstated. Every step left open to interpretation is a potential point of failure. 

For every project, write a thorough scope with clear deliverables - if there’s anything 
on the list without a clear ‘yes’ or ‘no’ answer to determine if it’s finished, the scope 
needs further clarification. Create concrete processes (and documentation) for any 
repeatable tasks. Choose tools the team will actually use - I recommend Trello ( trello . 
com ) and Slack ( slackhq.com ). Most important of all, trust your team to do the job 
they’ve been given. 


SVG 

CANVAS QUESTIONS 

SVG or HTML5 Canvas? 

Simon Nolan, Manchester, UK 
SS: It depends on what you are working 
on. SVG has many advantages over 
HTML5 Canvas - the most important 
being that SVG content is accessible, 
while Canvas content is not. Moreover, 


animating SVGs with CSS, SMIL or JS 
is easier than animating Canvas - the 
latter requires that you draw every 
single frame using JavaScript, while SVG 
can additionally be animated using 
declarative syntax (CSS or SMIL). 

SVG has an accessible DOM API, many 
authoring and optimisation tools, and - 
of course - is scalable. These advantages 
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Q&As 



Mike MacDougall - Performance Hero 

Mike found many opportunities to reduce scroll jank in the apps, including removing blending backgrounds and using rasterization. 


BOE Signed-out Trending CoreAnimation FPS (iPad 3) 

■ Before ■ After ■ Before Average ■ After Average 


EtsyPullToRefresh CoreAnimation FPS (iPhone 6+) 




SOE Dashboard CoreAnimation FPS (iPhone 6+) 

■ Before ■ After ■ Before Average ■ After Average 


Incentives The team at Etsy has a 'Performance Hero' award to celebrate great site improvements 


gji 3 SIMPLE STEPS 

Should we use CSS, JS or 
SMIL for animations? 

Jack Hawkings, Rome, IT 

SS: CSS, SMIL and JavaScript each have 
pros and cons. Weigh them up with 
your needs to make a decision .... [For on 
extended answer, visit netm.ag/SS-265] 


c+oirtM •»— ■_ 

■n 

mmm m.. 


Wsz 



~rt — ; •“ 






make SVG the better choice for things 
like infographics, for example, and web 
app user interfaces. HTML5 Canvas is 
a great choice for creating interactive 
and dynamic bitmap images, generating 
and exporting raster graphics, editing 
images, and operations that require 
pixel-based control. 

PERFORMANCE 

BUY-IN INCENTIVES 

What’s your advice on incentivising buy-in 
of web performance through gamification 
in a team environment? 

Kevin Lozandier, California, US 
LH: We celebrate performance wins 
from other development teams at 
Etsy. We have a wall monitor dedicated 
to celebrating a ‘Performance Hero* 

- someone who has found a great 
performance improvement on their 
product or feature and improved the site 
substantially. We update this and dole 
out lots of high fives whenever there’s 
a big new win; people respond really 
well to the positivity and encouragement. 
We’ve found that when people see it, 
they’re reminded to look for their own 
performance wins. 

SEO 

PR SECRETS 

Do you think SEO and PR are coming a lot 
closer together, with great PR leading to 
better rankings? 

James Bavington, Rugby, UK 

LZ: During the last few years, it’s been 

clear that PR and SEO are playing on the 


same team. It’s kind of a trend now. 

You can see the same with SEO and social 
media, for example. When PR is really 
focused on high quality content, we SEOs 
may help with nuances like search 
volume, optimisation and seasonal 
demand fluctuation. All of that helps 
PR content to rank better and that’s why, 
whenever possible, PR and SEO should 
work closely together. 


) -> 

J J 

CSS FOR TRANSFORMATIONS 

CSS is often great for animations. 
CSS animations on SVGs perform 
better on mobile than SMIL animations. 
However, not all SVG properties can be 
animated via CSS. 

C + DC’tN 


WORKFLOW 

SILVER BULLETS 

Do you think agile is the silver bullet 
for all workflow problems? 

Bailey Bradley, Sheffield, UK 
JL: Unfortunately, there’s no such thing 
as a silver bullet. I’ve seen agile teams 
implode, and waterfall teams run like 
well-oiled machines. The trick is to 
find an approach that everyone in your 
organisation is willing to follow, then 
follow it religiously. This is doubly 
important for management! If the 
process isn’t followed, it’s completely 
useless. But when everyone works 
together and plays by the same rules, 
teams tend to function wonderfully. 

SEO 

ON THE WAY OUT 

Will SEO become obsolete? 

Phil Ward, Adelaid, AU 
LZ: SEO is at the root of search engines 
so the concept of it will remain the same. 
Imagine how a search engine would look 
without organic results - it would just 
be a classifieds website. A few years 



SMIL ISN'T FUTURE-PROOF 

The advantage to SMIL animations 
over JS animations is that they are 
preserved when the SVG is embedded 
as an image. However, SMIL will be 
deprecated in favour of the Web 
Animations API. 



JS OFFERS CREATIVE FREEDOM 

I JS makes animating easier if you 
use one of many available SVG 
animation libraries, and gives you finer 
control over timing functions and easing. 
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EXCHANGE 




Retina resolution Here the size at which the Google logo is displayed is smaller than the size of the logo file 


^ ago, people were freaking out about 
voice recognition search, saying it 
would kill SEO and the way we used 
to use search engines. The only place 
I see people using voice recognition is 
on commercials trying to sell voice 
recognition. Long live SEO! 

PERFORMANCE 

RETINA RESOLUTION 

Are double-res images worth their 
weight? Especially if traffic to your site 
is under 6 per cent retina? 

Andy Layman, Seattle, US 
LH: Using the new picture spec, you’re 
able to deliver correctly-sized images 
(including retina) to the right devices, 
which is a huge performance win as 
it reduces unnecessary overhead. The 
question is really: is the development 
time needed to optimise and deliver 
those images worth it, if your traffic 
is under 6 per cent retina? Weigh the 
development investment against the 
engagement metric gains from delivering 
more beautiful images. 

SVG 

CLEANED UP 

Pd love to know best SVG ‘cleaning 
up’ practices - Illustrator and Sketch 
leave bloat. 

James Rosen, San Francisco, US 
SS: Editors do generate a lot of bloat and 
unnecessary code that you can (read: 
should) remove before using your SVG. 
Cleaning up SVG code is recommended 
whether you are going to dig into the code 
and style/animate/script the SVG, or you 
are going to just use the SVG as a static 
image on your website. The most popular 
SVG optimisation tool is SVGO ( github. 
com/svg/svgo). SVGO comes with many 
tools that you can fit into almost any 
workflow - like Grunt and Gulp plugins, 
OS X folder actions and GUIs. 

Note that optimising an SVG using 
SVGO could change the SVG document 
structure and might eventually affect 
any scripting and animations you have 
applied, so choose your optimisations 
wisely. If you are only going to use the 
SVG as a static image, you won’t have 
anything to worry about - just make 
sure the SVG viewBox is preserved. 


SEO 

SITEMAP SHARING 

Sitemap submission - yes or no? 

Jordan Foord, Sydney, AU 
LZ: There is a big ongoing debate about 
the pros and cons, and dos and don’ts 
relating to sitemaps. My answer is - it 
doesn’t cost anything to generate one 
(especially if you use XML-Sitemaps.com 
or similar), but it may help your site to 
have one. Remember about the HTML 
version too, as a part of your website. 

PERFORMANCE 

HACK HANGOVER 

Will there be a hangover from all our 
performance ‘hacks’ once HTTP/2 and 
SPDY is rolled out? 

Justin Avery, London, UK 
LH: Yes! I wish we could say that one day 
we will be in HTTP/i land, and a switch 
will be flipped, and the next day we’ll 
be in HTTP/2 land. Unfortunately, there 
will be a long time in which we have to 
plan for a mix of the two. We’ll have to 
continue to do things like concatenate 
assets for a while. As we creep closer 
to more support, check out: caniuse. 
com/#feat=spdy for specific cases. 

SVG 

SCALE AND ROTATE 

What is the best option for scaling and 
rotating SVG elements in a group through 
JS? On the group or each element? 

Leif Ringstad, Copenhagen, DK 
SS: For JS, SMIL or CSS animations, it 
depends on whether you want to preserve 
the spatial relationships of the elements 
within the group. If you want to preserve 


them, transform the entire group. If you 
only need to transform one element in 
the group, then do just that. 

SEO 

SUBDOMAINS 

Are subdomains bad practice for SEO? 

Lallo Vigil, Colorado, US 
LZ: It’s more about website architecture 
than SEO. Take a look at Wikipedia 
or HubPages. Wikipedia places each 
language version on a subdomain, while 
HubPages - a blogging platform - places 
each user on a subdomain. If any user 
starts linking to their own blogposts 
against Google’s TOS, a manual action 
will likely be placed on a specific 
subdomain rather than the whole site. 

WORKFLOW 

EMAIL TIMESAVERS 

Is there a way to automate some of the 
emails I have to write for every project? 

Louis Castaldo, Florida, US 
JL: Absolutely! For personal use, try 
TextExpander for Mac ( netm.ag/text-265) 
or PhraseExpress for Windows 
( phraseexpress.com ). With these you can 
create abbreviations for your frequently 
used snippets of text. For example, when 
I type ‘callme’ it auto-expands to my 
hours and contact info. If you’re working 
on a team, tools like Zendesk have 
‘macros’, which are like TextExpander 
snippets with added functionality. Both 
tools allow for variable input where you 
can insert the client’s name or other info 
that changes in each message. Give these 
a try - it should save you thousands of 
keystrokes a day! □ 
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A domain name 

for every occasion ^ 

Choose from hundreds of new domains for 

you and your clients 




FROM 

£3.49 

per year 
ex vat 



t>orwAirts suck as: 

.photography .email 

.guru .agency 

.today technology 



Get your clients off to a great start 

with a memorable domain name 



.xyz 

.london 


...ArtJl MArtlj fKOVUs 


Whatever website you are creating, whether it is for a friend, your clients 
or just yourself, we have a domain that will suit all your needs perfectly. 


J Full DNS control 
J UK based support team 


Why 123-reg? 

J We host over 1.7 million websites 
J The UK's #1 domain registrar 


1 2 3 -reg 


co.uk 


11 REASONS WHY YOU SHOULD ATTEND 

generate new york 

New York - New World Stages - 17 April 2015 


© The conference for web designers, 
presented by net and Creative Bloq, 
is back! Here’s why you need to be there. 

0 ENJOY AN OUTSTANDING SPEAKER LINE-UP 

We Ve put together a stellar bunch of people 
for this event. See netm.ag/speakersNYC. 

02 PICK’N’MIX 

There are two tracks, so you can choose the 
talks most relevant to your job and interests. 

0 ; DISCOVER TOMORROW’S TRENDS TODAY 

Come along and learn the principles you 
need to stay ahead of the curve. 


O' ATTEND SHOPIFY’S INTERACTIVE WORKSHOP 

Get an overview of the Shopify platform in 
this 30-minute session 

05 SUPERB NETWORKING OPPORTUNITIES 

Make contact and share ideas with fellow 
web folk in a fun, energised environment. 

06 SAVOUR AN AMAZING LOCATION 

Generate will take place at the New World 
Stages, just off Broadway. 

07 HANG OUT WITH THE SPEAKERS 

Why not share a beer with the speakers and 
the Generate team the night before the show? 


08 PARTYTHE NIGHT AWAY 

When the talks are over, make sure you don’t 
miss our after-party. 

OS MAKE ATRIP OF IT 

There are tons of other great things on around 
the same time, like the Tribeca Film Festival. 

10 EXCLUSIVE GENERATE VIDEOS 

Afterwards, youTl get exclusive online access 
to all the talks you may have missed. 

DID WE MENTION LUNCH? 

Finally, if you still need persuading, here’s 
a final clincher - the lunch will be fantastic! 


MIKE M0NTEIR0 VALHEAD 

muledesign.com valhead.com 



BRAD FROST LARA HOGAN 

bradfrost.com larahogan.me 


TICKETS ON SALE NOW 


Learn responsive web design, user 
experience, CSS, how to present to 
clients and much, much more! 


generateconf.com/new-york -2015 
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People, projects 
& paraphernalia 


THIS MONTH FEATURING... 




SIDE PROJECT OF THE MONTH 16 

David Gillett shares what he's learnt in his 
photography project 12 by 12 - now in its 
third year, and still going strong 


CLIENTS FROM HELL _ 17 

A designer wrangles with a clingy customer 
who doesn't understand the concept of a 
terminated contract 


WORKSPACE _ 18 

Lahaina Mae Mondonedo gives a whirlwind 
tour of nclud's workspace, which comes 
complete with its own enviable bar area 



BEYOND PIXELS _ 20 

Randall Bohannon gives an insight into the 
patience, precision and practice that goes 
into building model ships from scratch 


NEED LIST _ 21 

A look at the objects of web design desire 
we're lusting after this month, including 
a dinky guide to Git from Ryan Taylor 



EVENT REPORT _ 23 

CSSConf Oakland is a web conference with 
a comfy vibe - right down to the squashy 
armchairs. Natalie Downe was there 
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12 BY 12 

Digital designer David Gillett is embarking on the 
third year of his inspirational photography project 


SIDE PROJECT OFTHE MONTH 



job: Digital designer 
w: davidgillett.co.uk 
t: (cpdavidsamgillett 


O net: How did you get involved in photography? 

DG: Although I get a great deal of satisfaction 
from being a freelance designer, I started to feel as 
though I wasn’t building new skills. Photography 
seemed like a natural fit for me. I attended a few 
courses and took part in a number of photographic 
projects but never really felt as though I was being 
challenged. I decided to set up 52 by 52 and create 
the photo project I’d been looking for myself! 

52 by 52 was a year-long series of photo challenges 
set by renowned photographers. Every week a new 
challenge was issued and group members were 
invited to interpret it by submitting a photo to a Flickr 
Group. To my surprise, it ended up attracting some of 
the world’s leading contemporary photographers and 
we built up a lively, passionate online community. 
After 12 months of running the project I changed the 
format to become 26 by 26, and then for the third 
year, 12 by 12 ( 12by12.net ). 


net: How is 12 by 12 different? 

DG: The concept remains the same, but year three 
features monthly challenges. It will be interesting 
to see how a longer time frame alters the members’ 
responses. 12 by 12 also encourages experimentation 
in terms of approach as well as aesthetics. 

net: Do you have any favourites amongst the 
photographers who have been involved? 

DG: One of my all-time favourites came from Martin 
Parr ( martinparr.com ) in year one. His challenge was: 
“Photograph something that you have never shot 
before, in a style you have never used before, so the 
photo is not recognisable as yours.” It seems to get to 
the root of what the project is about: straying far from 
one’s own comfort zone. I think part of the reason 52 
by 52 was so successful in attracting such high profile 
photographers was the fact it was mutually beneficial. 

net: Any tips for designers planning to embark 
on a new side project? 

DG: Invite other people to collaborate with you as 
soon as possible. It’s easy to hold on too tightly to 
your side projects, strangling them with your own 
sense of perfection. I found opening the project to 
other people’s input made it feel like it was much 
bigger than just my own ‘baby’. □ 
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CLINGY CUSTOMER 

Exclusively for net: the latest in a series 
of anonymous accounts of nightmare clients 


CLIENTS FROM HELL 


^ I worked with one particular client for 
several years. Eventually, he stopped 
paying me in a timely manner, and had to let him 
know I would no longer be working with him. 

However, he continued to email me for design 
work, repeatedly mentioning a big event one 
weekend. In my replies, I reminded him of our 
contract's termination. Then, the night before 
his event, I got a text. 

Client: We okay? Thanks. 


Client: Please don't screw me and my customers. 
Just help me out with these logos. 

Me: I do not appreciate you hounding me at this 
hour. I am already in bed. Please do not contact 
me again. 

Client: But I have been texting you all week! 

I did not respond. In the week that followed... 

Client: Do you know anyone who can help me 
with my website? 


The next text came minutes before midnight. 


The next day... 


Client: Everything okay for the logos? 

Me: No - our contract is over. 

Client: I know, but you told me you would handle 
my needs through to the end of July. 

Me: It's August. 

Client: We have worked together for a long time. 
Please help me with the logos I need, and then 
later we can close things out properly. 

Me: We have nothing to close out - our contract 
terminated at the end of July, and you have 
only paid up to March. 

Client: But every time you asked me to pay you, 

I brought a cheque to you! 

Me: That is not true. 


Client: Can you refer me to another web designer? 
And did you do those two logos I asked you to do? 

Two days later... 

Client: Call me. I am trying to make the logos 
myself and I need help with Photobook. 

I assume he meant Photoshop. Needless to say, 

I didn't reply. 


CLIENTSI 

clientsfromhell.net 



HOW TO 


MAKE THE 
MOST OF A/B 
TESTING 


Can't decide what's right for your 
site? We asked our Twitter 
followers about the perils and 
pitfalls of A/B testing 


OPT IN OR OPT OUT 

(cDgarethllew has a double¬ 
pronged approach: "Research with 
Mouseflow and test with 
Optimizely." (cpmattpointblank, 
however, cites a cautionary blog 
post from (cDsumall about not 
using Optimizely correctly: "Read 
this before getting too excited 
when your results show what you 
want them to show: netm.ag/ 
optimizely-265." 


AS EASY AS ABC++ 

(cQosvik highlights Google's 
typically experimental approach 
to testing: "I use Google Analytics 
for content experiments without 
redirects: netm.ag/analytics-265." 
(cphalfnibble, meanwhile, goes 
back to basics: "I always use C++ 
to test both A and B - it is so 
much better than C." 


FACE THE FACTS 

(cQbluemwhitew employs a little- 
known piece of WordPress magic 
to test his sites. "I use 'get_ 
template_part' to include 
recyclable and/or split-testable 
template components" ( netm.ag/ 
temp-265 ). Finally, @_LeonBrown 
keeps things old school: "Don't 
forget to test with users face to 
face and ask them questions." 
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BUILDING BLOCKS 

Lahaina Mae Mondonedo shows us around nclud’s 
studio, where every visitor contributes to the decor 


WORKSPACE 


O nclud is a creative agency 
that lives at the convergence 
of design and technology. Our 
company consists of designers, 
developers and strategists, and our 
studio is central to our work and 
culture. At nclud, we’re habitual 
challengers of the status quo, and 
our workspace is no exception. 

Designed by our creative team 
in partnership with a world-class 
architectural firm, our space allows 
ideas and talent to flourish, while 
ultimately providing our clients 
with innovative solutions. 

We like to surround ourselves 
with the work and designs of our 
friends and colleagues in the 
global community. In fact, we 


keep a token from every industry 
speaker or visitor to our studio - 
including this space shuttle 
illustration by Aaron Draplin (1). 

Lego bricks (2) are the team’s 
favourite toy. We often use them 
to explain ideas and make topics 
more tangible. Our approach can 
make people nervous, but we find 
using these familiar objects in 
unconventional ways helps us 
better collaborate with our clients. 

Our process at nclud integrates 
team members across different 
disciplines, from project start to 
finish. The space is filled with 
sketchbooks [ 3 ), whiteboard walls, 
blackboard walls and writable glass 
walls, so every part of our office is 


an area where ideation between 
any team members can occur at 
the moment of creative bliss and 
without barriers. 

As a digital agency, we believe 
in creating within the medium 
that we’re designing for as soon 
as possible. We advocate the idea 
that code and design should drive 
each other, right from an idea’s 
inception. We’re constantly 
mocking up concepts on laptops [u) 
and TV screens throughout the day. 

Finally, one of the busiest 
areas in the studio is our ‘bar’ 
Whether it’s for team standup 
meetings, design critiques or 
brainstorming over burritos, this 
space keeps us active and on our 
feet. Much like the entire office, 
this setup breaks down barriers 
to collaboration and gets everybody 
in the conversation. □ 



* 


Lahaina ((cDlahainamae) is a senior 
strategist at nclud ( nclud.com ). She 
specialises in producing multimedia 
content and marketing campaigns 
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Great Ideas 

Deserve Great Hosting 


Find out more at tsohost.com 



One-click installs for many popular apps 


Save 25% off Cloud Hosting with coupon 

® © B ■ CR8IDEA 


Pay monthly from 

£ 2.99 




STUFF I LIKE 



JEN SIMMONS 

Host, The Web Ahead 
thewebahead.net 

GIT TOWER 

When prototyping, everyone 
should be using Git version 
control to prevent loss. Tower 
makes understanding and 
using Git much easier, and 
I love staying in a visual frame 
of mind while designing, 
not switching to the 
command line. 
git-tower.com 


CODEKIT 

I use Sass on most 
projects, but running the Ruby 
command from the command 
line makes my Mac too slow. 
Plus, if I do it all manually, 
it's a lot of steps. CodeKit 
handles everything. It makes 
preprocessing idiot-proof. 
incident57.com/codekit 


PANTHEON 

Pantheon is not really a 
hosting space, it's more of a 
deployment and management 
app. Every project has dev, 
test and live 'servers'. It 
comes with Memcached and 
Varnish to make sites wicked- 
fast. It's got Solr search. Why 
would I want to set all that up 
myself? Pantheon already has 
everything done right. 
getpontheon.com 



MODEL SHIPBUILDING 

This month ... patience, practice and precision helped 
Randall Bohannon master this time-consuming art 

KlEYOND pixels 


^ ne a ^ ernoon ' 1 S one t0 see a during 
exhibition about the Whydah Gaily, a ship 
that was used for privateering - a pirate ship, if 
you will. On display was a beautiful model of the 
actual ship, and I was in awe. 

My love for model ship building was born. At 
first, it was just a cool thing to do, but as I started 
building my first ship, admiration for the master 
shipwrights that designed and built these 
magnificent vessels replaced the cool factor. 

I love my gadgets, but there comes a time 
when you need to power down and think for 
yourself. It is that complete separation from the 
digital world that is so refreshing. I am not the 
best model shipwright by far, but I get great 
satisfaction when major build milestones are 
complete. Model ship building is like nothing 
I have ever done before. It takes extreme 


patience, practice and precision. 

This has been my hobby for almost four years 
now, and I have yet to complete my first scratch- 
built ship - the HMS Triton, a British, 28-gun, 
modified Mermaid class frigate from 1773. During 
my build, I go into extreme detail. I even make the 
bolts that were used to fasten pieces together, 
and if they're available, I use the same materials 
that were used on the actual vessel. 


One big connection to web development and 
design is to do with problem-solving. I force 


myself to think for myself, without pulling up 
Google. I want to learn, not be told how to do 
something. I bring that focus into my web work 
and notice that ideas flow much more freely. 

The keel of a ship is the most important 
structure - it's the 'backbone of the ship'. 
Everything was built and measured from the 
keel upwards, and measured in terms of length, 
depth and width of keel. Bolt sizes were custom- 
made from fractions of depth of keel; hull planks, 
frame widths and height, gun count and so on. 
The keel wasn't just the backbone, but the heart 
of the ship. 

This permeation throughout the entire 
construction process kept everything in 
proper proportion and balance. The ability 
to visualise a complete process and an end 
result was invaluable to shipwrights, and seems 
a little lacking in our profession. Under all the 
requests and requirements, there is a keel, one 
single structure, goal - the soul of your project. 
Find it, and you have your entire venture laid out 
right before your eyes. □ 


Web designer and developer 
Randall is an Air Force veteran 
and the founder of Triton Web 
Arts ( tritonwebarts.com) 
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Need list 




NEED LIST 


STUFF WE WANT 

Small objects of web design desire: from an app that enables you to act 
as eyes for a blind person to a handy pocket guide to Git 




What we think 

(D This four-part book series tackles the A-Z of Sass development, from starting out to getting really Sassy ( netm.ag/sass-265). 

(2) Want to know which UX course to study or how to get a UX job? This book helps you master all things UX [netm.og/moster-265). 

(3) Looking for a new way to test your responsive websites? Viewport is the latest browser to enable you to do just that ( netm.og/viewport-265 ). 

N In this Five Simple Steps pocket guide, Ryan Taylor introduces Git and explains how it will revolutionise your workflow ( netm.ag/git-265). 

(5) Email can be surprisingly difficult. Jason Rodriguez has created this guide to the components of HTML email design to help you on your way 
( professionolemoildesign.com). (6) Be My Eyes uses live video chat to connect blind people with volunteer helpers all over the world [bemyeyes.org). 


net april 2015 21 



























NEXT 






THE MONEY 
ISSUE 


We reveal how much you should charge, how to create 
amazing ecommerce sites, and much more! 


PLUS 




BUILD FULLY 
RESPONSIVE APPS 
WITH FOUNDATION 


CREATE STUNNING DATA 
VISUALISATIONS 
WITH D3.JS 


BUILD PRODUCTION 
READY SITES WITH 
WEBFLOW 


ISSUE 266 ON SALE 19 MARCH 


PRINT EDITION, BACK ISSUES AND SPECIAL EDITIONS AVAILABLE AT 


myfavouritemagazines.co.uk 


DIGITAL EDITIONS AVAILABLE ON ITUNES, GOOGLE PLAY, KINDLE, NOOK AND ZINIO 


net.creativebloq.com 












Photography: Karolina Szczur flickr.com/photos/xytine 
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G8SC0NFOAKLAND 

Natalie Downe reports from the California 
web conference with a comfy vibe 

ESvent REPORT 


DATE: 9 DEC 2014 


LOCATION: OAKLAND, CA 


URL: cssconfoak.lond 


The inaugural CSSConf Oakland took place 
-f at The New Parkway Theater in December. 

It was expertly coordinated by Mikeal Rogers, 
Karolina Szczur, Kristina Schneider and Alex Sexton 
as part of JSFest, a week-long series of frontend 
events in Oakland, California. 

The relaxed setting meant it felt like chilling in 
the tatty sofas of a cosy living room, hanging out 
with 100 or so close personal friends. The sessions 
were excellently curated to form a well-rounded 
agenda, with healthy diversity in the line-up and 
women representing seven out of 12 speakers. 

Tab Atkins of the CSS working group (xanthir.com) 
spoke with such bubbling enthusiasm for new 
capabilities coming to CSS that we couldn't help 
but be carried on a journey to the glittering future. 

A future where an image can be the output of a 
function, you can create source-order independent 
layouts with Flexbox and even programatically 
adjust colour values live in the core language. Even 
media queries are getting a facelift with the ability 
to target the accuracy of the pointer, or if a device 
has hover capabilities. 


Two other highlights were talks bourne of 
experience gleaned through hard graft on real- 
world projects. Jessica Dillon (netm.ag/dillon-265) 
told the story of the implementation of Bugsnag, 
a visual CSS testing framework, while Jennifer 
Wong (jennzOr.github.io/1999) shared lessons 
learned in her quest for beautiful responsive emails. 
Both talks elegantly encapsulated their respective 
projects and provided the audience with valuable 
take-home lessons. 

Unequivocally my favourite session came from 
Elyse Holladay (pictured above), a frontend 
architect at RetailMeNot, whose eloquent and raw 
talk spoke directly to the soul of everyone there 
(netm.ag/holladay-265). Holladay mused that as 
we gain experience and are no longer safely coddled 
in the confidence of inexperience, we panic about 
what we know we don't yet know. She proposes 
that instead of agonising over not yet being good 
at something, we be kind to ourselves, relish the 
challenge of learning and stay curious. □ 


Natalie is the director of frontend 
engineering at Eventbrite and 
co-founder of the professional 
events social directory lanyrd.com 



EVENT GUIDE 


HTML5 DAYS 

DATE: 4-6 MARCH 2015 
LOCATION: MUNICH, DE 
Get to grips with HTML5 over 
three days with this intense 
series of workshops. It runs 
concurrently with JavaScript 
Days and Angular JS Days, so 
there's plenty to choose from if 
you're already a markup master. 
html5-days.de 

MINNEWEBCON 2015 

DATE: 13-1A APRIL 2015 
LOCATION: MINNEAPOLIS, US 
The City of Lakes hosts this 
grassroots web conference for 
the eighth year running. Karen 
McGrane and Steve Krug will 
provide the keynotes, while 
more than 20 sessions will take 
place with various design gurus. 
minnewebcon.org 

HOW DESIGN LIVE 2015 

DATE: 4-8 MAY 2015 
LOCATION: CHICAGO, US 
This five-day event includes 
masses of talks on all things 
web-related, as well as talks on 
infographics, brainstorming and 
leadership skills. The first two 
days are designed specifically 
for 'solopreneurs', so if you're 
going it alone this is the 
conference to attend. 
ho wtodesignlive. com 

UPFRONT 

DATE: 19 MAY 2015 
LOCATION: MANCHESTER, UK 
The Comedy Store in 
Manchester hosts this forum 
for everything frontend. Experts 
Brad Frost and Alicia Sedlock 
will be crossing the pond to 
present talks, while Richard 
Rutter will bring British 
sensibilities to the event. 
upfrontconf.com 
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SUBSCRIBE TO NET 

GET THE NO.1 CHOICE FOR WEB DESIGNERS AND DEVELOPERS 
DELIVERED TO YOUR DOOR, YOUR DEVICE, OR BOTH 



PRINT EDITION ONLY 

Take out a print subscription to net and 
get your copy before it hits the shops. 
Each issue is packed with the latest web 
trends, technologies and techniques 




DIGITAL EDITION ONLY 

Take out a digital subscription to 
net for on-the-go access to our fully 
interactive edition, with streaming 
screencasts, extra images and more 



Terms & conditions: Prices and savings quoted are compared to buying full priced UK print and digital issues. You will receive 13 issues 
in a year. If you are dissatisfied in any way you can write to us or call us to cancel your subscription at any time and we will refund you 
for all un-mailed issues. Prices correct at point of print and subject to change. For full terms and conditions please visit: 

myfavm.ag/mogterms. Offer ends 31 March 2015. 
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NEW PRINT & DIGITAL EDITION 

Enjoy a combined print and digital subscription, and take advantage 
of print as well as exploring the fully interactive digital experience 


GREAT REASONS TO SUBSCRIBE 

• Print edition delivered to your door 

• 13 issues in a one-year subscription 

• iPad and iPhone edition download 

• Android edition download 

• Money-back guarantee 


FROM 

£32.49 



TWO SIMPLE WAYS TO SUBSCRIBE 
ONLINE: myfavouritemagdzines.co.uk/NETSUBS 
PHONE: 0844 848 2852 AND QUOTE CODE: 
PRINT15, DIGITALIS OR BUNDLE15 


Your subscription will then continue at £32.A9 every 6 months - saving 31% on the shop price and giving you an 83% discount on a digital subscription 


























VOICES 

Opinions, thoughts & advice / 



CONTENT STRATEGY 


THE TRUTH ABOUT UX DESIGN 28 

User experience isn't all about great interfaces. 
Paul Boag thinks it's time UX designers took 


GREAT CONTENT 

MANAGEMENT 


their place at the boardroom table 



INTERVIEW _32 

Generate speaker Brad Frost shares his 
thoughts on unnecessary redesigns, the big 
agency model and industry showboating 



Angus Edwardson takes a 
closer look at the emerging 
movement that’s tackling the 
concept of ‘content-first’ 

O The relatively new (or at least newly 
defined) role of ‘content designer’ 
throws up some interesting arguments 
when it comes to the ‘content-first’ 
approach to web design. A content designer 
creates content, much like a digital editor. 
However, their responsibilities extend to 
making decisions about the structure of the 
website and the presentation of content. 

GOV.UK defines the process as “Designing 
content, not creating copy” ( netm.ag/gov- 
265). Content designers are encouraged to 
think more like designers; being aware of 
design constraints, and thinking creatively 
about how they can meet user needs and 
business objectives. 

Digging around marketing websites 
and blogs, you can see there is a fairly 
widespread shift in content professionals 
becoming more concerned with aesthetics, 
usability and functionality ( netm.ag/con- 










Opinion 


tent-265). So while the design community is 
screaming about needing to give more love 
to content, an almost inverse movement is 
happening on the other side of the fence. 

Here, I’ll outline a simple approach 
that can help us work together on website 
projects. The idea is to design sites that can 
be easily managed by content creators to 
consistently fulfil the aims of the project. 

CONTENT TYPES OVER PAGES 

Coming up with a set of well-defined 
content types is one of the best ways to unite 
content creators and designers from the 
start of a project. Content types might be 
things like Service pages, Staff bios, Product 
categories, Blog posts or Weekly emails 
[for more on content types from Angus 
Edwardson, see netm.ag/types-265]. 

Don’t be concerned if you end up with 
nearly as many content types as you would 
have had ‘pages’ on your site. The idea is 
that they are more flexible than a list of 
pages. They are also more functional (the 
name of the content type has intention) and 
can be understood and referenced by every¬ 
one in the project. 

By agreeing that the creation of any new 
content type is preceded by a proper review 
process, you can make sure your site’s 
structure and strategy stays locked down. 
This means any new content has to fit into 
the existing taxonomy, or the creator must 
present a valid argument as to why the team 
should iterate the initial plan. 

PROTO-CONTENT 

An empty content type isn’t enough to start 
designing a page. We need to get some real 
content in there in order to get an idea 
of what we’re communicating. But while 
Lorem Ipsum obviously isn’t going to cut it, 
we don’t need to wait for days to get hold of a 
polished final draft, either. I suggest start¬ 
ing the process with some rough ‘proto- 
content’ ( netm.ag/proto-265 ). You just have 
to be aware that the content will evolve 
with the design. This can be really healthy, 
as it challenges the design and technology 
around different instances of content. 

CONTENT TEMPLATES 

When it comes to producing the site’s 
content at scale, you can use content types 



While the design community is 
screaming out about giving more love to 

content, an almost inverse movement is 

happening on the other side of the fence 


much like Erin Kissane proposes we use 
content templates: “Collect information 
more quickly by giving experts an easy 
fill-in-the-blanks structure to work with” 
( netm.ag/blanks-265 ). By translating all the 
elements in your content types into fields 
in a content template, authors can easily 
populate the structure with the appropri¬ 
ate content. By surrounding each field with 
rules and tone-of-voice guidelines, you can 
drastically improve the quality and consist¬ 
ency of the content supplied. 

A FLUID SYSTEM 

So, content design can be considered from 
two angles: it’s a shift in how people are 
creating content, and it can also be a big 
influence on the way we design sites in the 
first place. We need our sites to be designed 


for content creators. If your initial Content 
types are understood and referenced by 
everyone involved with defining, producing 
and publishing content, the whole process 
becomes much faster and more reliable. The 
content produced is always connected to the 
aims and intentions of the project. 

Templates, guidelines and a workflow 
around content creation can really help to 
make ongoing development much easier. 
Content design is about knowing which 
channel, format or presentation technique 
is best - taking both design and the design¬ 
ers, as well as content and the content 
creators, into account. □ 


Angus (@Namshee) is the product director 
at GatherContent, where he spends his time 
speaking to agencies and teams about content 
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Essay 


UX 


THE TRUTH 
ABOUT UX DESIGN 


Illustration by Ben Mounsey 

You may have mastered slick interfaces - but if you want 
to really affect a user’s experience, get out of Photoshop and 
into the boardroom, says Paul Boag 


O When you think about user experience design, 
what do you think of? A beautifully crafted inter¬ 
face? Sketching out a wireframe? Cracking open 
Photoshop or Sketch? In fact, user experience design 
starts not in Photoshop, but in the boardroom. If we 
want to call ourselves user experience designers then 
we need to expand our horizons. 

Many of us like to call ourselves user experience 
designers, when in fact we are user interface designers. 
As soon as things beyond the interface come up we get 
uncomfortable. We claim that content is the client’s 
problem, or that we don’t have the authority to interfere 
in business processes. To become user experience 
designers we need to learn how to shape the entire 
experience, from beginning to end. That means moving 
beyond our comfort zone. 

Take for example Uber. When Uber came to London it 
caused an uproar amongst cab drivers. The problem: 
Uber was able to offer a better user experience. Catching 
a London cab is far from a pleasant experience - they 
are over-priced, involve hailing a cab, having cash and 
waiting while the driver scribbles out a receipt. 

Uber removed these pain points. It improved the user 
experience by estimating the cost, providing an updat¬ 
ing ETA for the vehicle’s arrival, processing payment 
including tip, and sending a receipt via email. It didn’t 
improve things with just a nice user interface. Instead it 
addressed them by changing aspects of the business 
model, which involved executive decisions. 


Parcel delivery is another sector seeing the power of 
UX design. For some time, delivery companies have had 
well-crafted websites that allow you to track your parcel’s 
progress. Unfortunately, the experience has been poor. 
Things are now changing. Companies like DPD are con¬ 
sidering the whole experience - offering not only a well 
designed website, but one-hour delivery slots and real¬ 
time vehicle tracking. 

Unfortunately a lot of management teams resist this 
kind of change, in much the same way the London cabbies 
have. The problem with resisting changes that improve 
the user experience is that they will fail in the end. 

The music industry resisted downloads by suing 
Napster, but in doing so it only delayed the inevitable. 

In fact, sector after sector has fallen foul of improvements 
in the user experience brought about by digital. From 
Blockbuster to Kodak, big brands that failed to adapt 
have fallen by the wayside. 

TIME TO FIGHT 

This brings us as designers back to one of the most basic 
of human responses: fight or flight? Do we fight to 
improve the user experience across the organisations 
we work with, or do we fly to another organisation - one 
that understands the value of providing an outstanding 
user experience? Both options are valid, but if like me 
you are up for a good fight, read on. 

It starts not only with the decision to fight, but also ^ 
the decision that you are going to be the champion of 
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^ the user experience. Nobody will give you permission, 
but as Grace Hopper said: It’s better to ask forgiveness 
than permission. It means an end to saying ‘I don’t have 
the authority to change that’. 

I realise that writing this is easy. Doing it is much 
harder - but it is possible. I have done it and so can you. 
I got sick of building sites that failed to live up to their 
potential because of organisational shortcomings, and 
I got tired of papering over the cracks with yet another 
redesign. One day I just decided to untie my hands and 
champion the user experience. When I started I was far 
from capable, but I learnt the skills I needed. 

MAP THE USER EXPERIENCE 

Fortunately the journey begins in more familiar terri¬ 
tory: the user experience. To work out what needs fixing, 
you need to understand what the problems are. That 
means mapping the user journey. Look at every interac¬ 
tion a customer has with your organisation, from initial 


Once you have mapped the user journey, you will be 
able to see weaknesses in the experience, and opportu¬ 
nities to use digital to improve things. 

PERSUASIVE BUSINESS CASES 

At this point you are probably thinking: T don’t have the 
time to map the customer journey, and nobody would 
listen to my recommendations anyway.’ This is where 
we need to start expanding our skillsets. We need to 
increase our understanding of business practices and 
improve our persuasive skills. 

To improve the user experience you will need to put 
forward strong business cases. You will need to persuade 
management to allow you time to map the customer 
journey. Then you will have to ensure colleagues are 
willing to make changes to their business processes. 
This means improving our skills in two areas. We need 
to become more knowledgeable about business prac¬ 
tices, and we need to refine our persuasive soft skills. 


We need to stop complaining about marketers 
and business executives damaging the user experience. 

Instead we need to prove we can speak their language 

and help them solve their problems 


awareness through to post-purchase support. For each 
touchpoint, you need to establish what the customer is 
thinking and feeling. What questions do they have at 
this stage? What do they want the outcome to be and 
how do they feel about the experience? 

For example, imagine going to a concert by a band you 
love. A crucial part of that process is booking the ticket 
online. You know tickets will sell out fast and so you feel 
a mixture of excitement and nerves. Will you be able to 
book the tickets? Will you get the seats you want? Will 
the site stay up under the traffic about to hit it? 

You might have questions about the seating options. 
If I go for a cheaper ticket will I have an obscured view? 
If a friend books his own tickets will we be able to sit 
together? Understanding what is going on in the user’s 
mind at this touchpoint helps shape a better experience. 

But don’t just look at the digital touchpoints such as 
online ticket booking, look at the entire experience. As 
you are a digital professional, look for ways digital can 
improve offline interactions, too. 

For example, perhaps the user’s smartphone could 
hold the ticket, so they don’t have to carry a paper ticket 
with them. Or perhaps after the concert they could 
access edited highlights online. This would provide them 
with professional-quality video that they could share 
with their friends. 


We need to learn how to construct arguments based 
on threats or opportunities for a business. We need to 
discover how to use people’s pain points to push through 
change. How to step outside of our web bubble and 
communicate effectively with business professionals. 

A single article like this is not adequate to teach you 
how to bring about organisational change, but there is 
no shortage of resources out there that will. If we are 
going to call ourselves user experience designers, we 
need to be reading about business strategy, sales theory 
and much more besides. Try books like Good Strategy/ 
Bad Strategy ( goodbadstrategy.com ) by Richard Rumelt. 
Subscribe to Seth Godin’s blog ( sethgodin.typepad.com ) 
or follow sites like inc.com and forbes.com. 

We need to stop complaining about marketers and 
business executives damaging the user experience. 
Instead we need to prove we can speak their language 
and help them solve their problems. We need to step 
out of our silo and be willing to go wherever improving 
the user experience takes us. □ 


Paul is a digital consultant, author and 
speaker who helps organisations such as the 
BBC, European Commission and Nestle adapt 
to the new digital world ( boogworld.comj 
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BRAD FROST 

Words by Martin Cooper Photography by Noah Purdy 

The web designer and Generate speaker 
on cutting out showmanship, turning 
traditional publishing on its head, and 
why the big agency model is shifting 























O Brad Frost is not a man for fancy job 
descriptions. “I’m a web designer, 
I leave it simply like that,” he smiles. “I don’t 
like getting too far into the weeds with 
titles.” These days he specialises in helping 
clients move to a responsive way of working. 
This, he’s keen to point out, isn’t just about 
making web pages jump, morph and fold 
as the viewport changes size. That’s the easy 
bit. Any web designer worth their salt, 
he reckons, can knock a responsive site 
together in a few days. 

The difficult bit is what goes on behind the 
scenes. As such, these days Frost is more 
involved in helping companies adapt their 
workflows, sales, processes and structure so 
they can work responsively. Add that to his 
writing and speaking commitments, and he’s 
a busy man. “I keep my dance card pretty 
full,” he laughs. 

FIRST DATES 

Frost has established an impressive roster 
of big-name clients, including TechCrunch, 
Entertainment Weekly and Mastercard, to 
name a few. Happily, the industry has now 
got to the point where, at that all-important 
first meeting, Frost doesn’t feel the need to 
explain responsive design any more. Many 
of his clients have already dipped their toes 
into the water and embraced the technology. 

“The traditional model of contractors and 
agencies working with clients is an awkward 
dance,” Frost says of the mechanics of that 
first meeting. “It’s about impressing people 
and wowing them into hiring you. That’s not 
how I think it should be.” 

Frost is emphatic that if you’re a web 
design shop, this meeting should a go deeper 
than splashy pitches and showreels”, and 
instead focus on having open and honest 
discussions.. It should be about facts, and 
taking the time to have an honest discussion. 

Sadly though, he says, the desire to impress 
the client can sometimes get in the way of 
more important conversations. Those 
conversations should include, he says, dis¬ 
cussing where the client feels they are now, 
and where they want to be. 

So what kinds of things does Frost look to 
uncover? “Very often you have an idea about 
their goals,” he says. “Maybe the client has 
a six-year-old website that’s crusty and hard 
to maintain and, increasingly, they’re seeing 
more numbers coming from mobile.” 









Interview 



In such situations, having an objective 
outsider present can help bring clarity to the 
situation. “Those can be difficult conversa¬ 
tions to have,” Frost explains, “and I feel like 
as an outsider Pm sometimes able to play the 
role of therapist, to get people to open up.” 

NAILING DELIVERABLES 

At this early stage, there also needs to be a 
discussion about deliverables. “You really 
need to set people’s expectations about what 
it means to build a site in 
2015,” Frost says. “And 
that means talking 
through processes.” 

One of the biggest 
challenges he faces is 
helping people under¬ 
stand that it’s OK to 
proceed without a hi- 
fidelity image of what the 
final site will look like. 

That leads to unrealistic expectations 
because, at the end of the day, a picture of a 
website isn’t a website. 

Frost laughs: “Stephen Hay has a great line 
where he says, when you show a client a full 
comp, what you’re actually saying is: ‘Here’s 
a picture of what your website will never 
look like!’ And it’s entirely true.” 

Once more, Frost returns to the tempta¬ 
tion, when working with big agencies, to add 
and element of showmanship during these 


early meetings. “I’ve seen people paint these 
dramatic, blue-sky comps and put them in 
front of a client with a grand Don Draper 
reveal. It’s like: Wow! Aren’t you impressed?’ 
Sure, they might be impressed. But, at the 
end of the day, it’s dishonest to design things 
in that way. It’s not a smart idea to produce 
high-fidelity comps too early in the process.” 

The reason being that the web is fluid. 
It has 100,000 viewport sizes and static comps 
don’t give a holistic impression of any pro¬ 
posed site. “This is some¬ 
thing I’ve been talking 
about for a long time,” 
Frost continues. “His¬ 
torically, we’ve equated 
design with aesthetics. 
Sure that’s important, 
obviously. Colour, typog¬ 
raphy, things like that - 
I’m not discounting them. 
But often, people paint a 
very myopic picture of what the design actu¬ 
ally is.” 

What’s more, a static comp fails to repre¬ 
sent critical considerations like performance 
and ergonomics - which have a huge impact 
on how users perceive a client’s brand. 

MEETING CLIENT 2.0 

The success - or failure - of the sign-off 
process, Frost maintains, can be traced back 
to those early client conversations. At that 


stage it’s good practice to set expectations 
about how you intend to present incremen¬ 
tal work. The key is to agree on an iterative, 
as opposed to a waterfall, approach. 

The process, Frost says, “shouldn’t be 
based on call and response - ‘we present 
something to you, you react to it’. It’s meant 
to be a conversation.” 

AGILE ASPIRATION 

Surely though, clients who are fully 
conversant with the subtleties of responsive 
design are rare. Aren’t more traditional art 
directors hard-wired to ask for comps to sign 
off? According to Frost, these days clients 
tend to aspire to a more iterative, collabora¬ 
tive and agile way of working. 

The reason is, partly, an economic one: it’s 
simply a waste of time burning huge numbers 
of deliverables. However, there are certain 
pressures on agencies that can mean they 
don’t always deliver that in practice. 

“I’m working with a big client right now 
whose history is pretty entrenched in their 
catalogue,” Frost admits. “So, historically, 
their process has very much been: ‘Here’s a 
picture of the website, sign off on it, Mr Main 
Creative Director’.” 

“Historically, big agencies have felt a lot 
of pressure to ‘prove’ themselves to clients, 
which can lead to those grandiose pitches 
and blue-sky design explorations, ” he 
continues. “But in order to truly address 


“I feel like as an 

outsider I’m 
sometimes able 

to play the role of 

therapist, to get 
people to open up” 
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^ clients’ needs, both clients and agencies need 
to evolve their processes to work more col- 
laboratively and efficiently.” 

CALL FOR UNICORNS 

So, what’s Frost idea of a perfect team and 
structure? u In an ideal world everyone is a 
unicorn,” he quips. “They magically traverse 
between Ruby, Photoshop and PHP.” In the 
real world, Frost says he’s seeing a shift 
toward small teams that are doing incredibly 
good work. 

“You have people like Paravel out of 
Austin, Cloud Four from Portland, yiibu 
from Scotland and Dan Mall’s SuperFriend- 
ly in Philadelphia,” Frost explains. “That’s 
why I’m curious about the monolithic agency 
model. It doesn’t require 1,000 people to 
make a 1,000 page website.” 

All you need, he says, is time and a small 
group of cross-disciplinary, ‘T-shaped’ crafts 
-people. And to make best use of them within 
a big organisation, Frost advises, you need 
to set them free on a pilot project. 

“Let them - your A-Team, your Navy SEALs 

- set the pace. Don’t shackle them,” he says. 
“That’s the most effective, most realistic 
way to get an entire organisation on-board. 
Just let them do their stuff. See if it works 

- and when it does, roll that success out 
across the whole organisation.” 

From a strategic point of view, Frost says 
the roll-out should be done by the client’s 
own people. This approach ensures everyone 


is on-board with the changes, and helps 
people feel invested in the new site. 

ITERATION 

There’s another trend that’s shaking up the 
way sites are being managed. Firms such as 
Airbnb, Amazon and Etsy are embracing 
small, data-driven, iterative changes. 
They may never again need redesigning 
because they’re being con¬ 
stantly improved and 
refined. In Frost’s opinion, 
the days of the blanket 
redesign may well be a 
thing of the past. 

“Back to the big agency 
model: that’s their bread 
and butter. ‘So, you’ve got 
a crappy old Flash site? 

HTML5 is all the rage’. 

And, in three years’ time they come back and 
do it again.” 

He explains that some of the firms adopt¬ 
ing a more iterative model are seeing huge 
commercial gains coming from small 
improvements. “I’m not saying companies 
shouldn’t rebrand and move forward,” he 
says. “People are just realising it’s stupid to 
spend a million dollars on a redesign when 
they could be making subtle changes and 
seeing benefits.” 

Of course, there are times when a full¬ 
blown redesign is the only option. To help 
make things more straightforward, Frost 


suggests thinking strategically and 
embracing pattern libraries. This way, the 
process will be much less painful because 
there’s already a good system in place. “By 
embracing patterns, you’re setting the stage 
for future redesigns,” he says. 

TAKING ON PUBLISHING 

Finally, we touch on the other project taking 
up Frost’s time. He is 
writing a book - and it’s 
a unique one. Called 
Atomic Design, it focuses 
on how to craft effective 
interface design systems 
(netm.ag/atomic- 265). 
What’s really special is 
the book is being written 
live on his site, with the 
code hosted on GitHub. 

“I’m trying to be as open as possible with 
the book’s creation,” he explains. “I have a 
mailing list and I’m writing about the pro¬ 
gress and process, amongst other things.” 
This means the community can comment 
on the work as its being made. More impor¬ 
tantly, the readers can learn from the book 
straight away. It seems publishing - like that 
big agency model - is facing some exciting 
changes, and becoming more flexible to meet 
the needs of modern audiences. □ 

Brad Frost will speak at Generate New York. 
Buy your ticket at generateconf.com 
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TYPOGRAPHY 


HOW DO YOU CHOOSE 

THE RIGHT FONTS? 

Legibility, accessibility, flexibility... when it comes to fonts, it’s not as simple as 
picking something that looks nice. Seven designers share their approaches 



MINDY WAGNER 

Senior designer, Viget 

mindywagner.net 



JESSICA HISCHE 

Lettering artist and type designer 

jessicahische.is 


® l keep a running list of fonts I'd like to use 
some day, and when a new project comes 
up, I revisit it to see if there's a good fit. Lately 
I've been loving Adobe's Typekit integration. 

It's great for exploring a range of options. You 
can test a typeface fully and make a better case 
as to why clients should pay for a font. It makes 
the purchasing decision feel like less of a gamble. 



ALASTAIR CAMPBELL 

Accessibility director, Nomensa 

alastairc.ac 


® ln terms of accessibility, there 
is some general advice that 
certain typefaces - like Verdana 
and Tahoma - are designed to be 
readable. However, it is what you 
do with it that counts. Don't use too 
many typefaces in one page, don't 
capitalise everything, use good 
contrast colours, and avoid moving 
text. If you aim for good readability 
for all, you are unlikely to create 
accessibility barriers. 


® The first thing I do is ask 
myself: what kind of content 
do I have the most of? If it’s mostly 
paragraph text, Fll start with a 
workhorse text face (something that 
works well at text sizes and comes 
in enough weights and styles). If 
my site is mostly imagery and I 
just need a font for captions and 
headline, Fll look for those kinds 
of fonts first. Generally, Fm always 
after something that is well made 
(by a skilled type designer and either 
created for the web or adapted well 
for the web) and stylish. If it utilises 
bleeding-edge browser capabilities 
(like allowing me to access OpenType 
features), awesome, but it has to look 
good in worst-case-scenario 
situations as well. 
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KAI BRACH 

Web designer, Offscreen 

brizk.com 



SOPHIE SHEPHERD 

Senior designer, Ushahidi 

sophieshepherd.com 


© In order to provide a rounded 
experience to readers of my print 
magazine and visitors to my website alike, 
Fve chosen the same fonts for online and 
offline. The initial selection was made 
with cross-platform availability in mind, 
specifically looking for a very versatile set, 
with many weights and styles that give 
me a number of options in the different 
use cases (for example, Regular for white 
on black, and Light for black on white). 



DAVID HUGHES 

Digital product designer, Monotype 

monotype.com 


® l'm not going to lie - I find choosing type for screen really challenging. 

There are so many variables to consider, as well as influencing factors 
that are way beyond your control as a designer. What type of screen will people 
be reading your content on? What operating system will they be running? What 
speed is their connection? Bloody hell, even screen brightness is a factor. 

The best advice I can give is: get out of drawing tools and start prototyping, 
either by hand or with tools like Typecast. Test your prototype in as many 
different places as possible. Load it up on a bad mobile connection to see the 
impact when your web fonts don't load. Set appropriate fallbacks and of course, 
choose typefaces that were designed (or updated) for modern screen use. Eric 
Gill didn't create that typeface for your shiny Retina display. 


© I evaluate fonts from two perspectives: 

emotional and technical. On the emotional 
side, I find a font that 'feels' right with the 
content. Do the letterforms set the right mood? 

Is it easy to read in the context it will be used? 
Once I have a few options that fit the bill, I test 
them technically with questions like: How do they 
perform across multiple devices? What service is 
loading them in, and does that jive with the other 
fonts we are using? Is there room in the budget? 
Do we need to support multiple languages? 

How large is the font, and how will that affect 
performance? It's rare that a font passes every 
single test, so it's always good to prioritise 
them based on the project's needs. 



INAYAILI DE 
LEON PERSSON 

Lead web designer, Canonical 

yaili.com 


0 As an in-house designer, 

I have to follow our brand 
guidelines and design patterns, 
so there isn't much I can do in 
terms of which font I'll use for the 
next project! It's an interesting 
challenge, and something I now 
don't really think about. Our font 
has so much personality and the 
different weights make it versatile 
for different solutions. 


RESOURCES 


SHOPTALK 

In this ShopTalk podcast ( netm.ag/ 
shoptalk-265), Dave Rupert and Chris 
Coyier invite Sophie Shepherd to talk all things 
fonts, from blogging to overlays and Bootstrap 
grids. Previously at Happy Cog Austin, Shepherd 
is now a senior designer at Ushahidi, as well 
as organising the Austin Dribbble Meetup. 


EXPERT TIPS 

As the type manager of Typekit, 

Tim Brown knows a thing or two about 
choosing the right fonts. In this post ( netm.ag/ 
brown-265), he showcases his 15 expert tips 
for getting started with web fonts - including 
being mindful of file size, and the vital 
importance of testing. 


THE GOOD, THE BAD & THE GREAT 

Choosing the right font is an imperative 
step in creating the kind of aesthetic 
you're after. In this article ( netm.ag/ 
smashing-265), freelance designer Jeremiah 
Shoaf reviews a range of collections on the 
web, analysing the impact the fonts might 
have on the overall designs. 
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Q&A 


SARAH RICHARDS 


The content strategist shares the secret to 
creating sites that keep people out of jail 


I INFO 

Job: Content strategist, 
Citizens Advice 
w: sarahjrichards.com 
t: @escmum 


net: Does your work at Citizens Advice differ from 
the work you did at GOV.UK? 

SR: Both sites have the same audience - potentially 
anyone in the UK - but that’s pretty much where the 
similarity ends. We’ve done a lot of research already 
on the Citizens Advice Alpha ( netm.ag/alpha-265 ) - 
the prototype for the new Citizens Advice service 
- and we know our audience searches differently, 
wants information displayed in a different way 
and responds to a completely different tone. 


net: What's the best way to work out the needs 
of the user for a particular project? 

SR: Find out what the user needs to do. We run 
content workshops where we ask users, specialists, 
lawyers, whoever is relevant to work with us to define 
the user needs. Then we take site stats and metrics, 
the organisation’s aims and anything we can get from 
Google Analytics on the subject. We put it all together 
and work out what we can provide. 

Next, we write those in user stories. At Citizens 
Advice we have two levels. We still use task-based 
stories, but we also have advice-based stories. We 
need to be far more aware of cause and effect, not 
just the task the user wants to complete. 

net: Do you approach content strategy differently 
when it comes to varying devices? 

SR: I really don’t see the point. A lot of organisations 
think their design needs to be very cut down and 
their words more concise for mobiles and tablets. 
Why? If you can get away with a clean experience and 
fewer words, why are you making desktop users trawl 
through unnecessary content? You can be boring and 
pointless in five words or fewer. Make all your words 
count and the device won’t matter. 

net: How do you think style guides are going to 
change in the future? 

SR: I have seen too many styles guides with a firm 
foot still in the printing style guide era. I would 
like to see more reliance on testing and research, 
rather than just tonal whims. I had the GOV.UK 
style guide researched by the University of Reading 
( netm.ag/reading-265 ). I wanted the government’s 
communications to be the most efficient they could 
be. That means lab and academic research. I think, 
as behavioural science and research becomes more 
sophisticated and revealing, our style guides will 
have to keep up, so we keep up with our audiences. 


net: How do you go about approaching a new 
project, in terms of content? 

SR: The most valuable thing I’ve learned is to assume 
nothing, question everything and research until you 
have nowhere else to go. Everyone at Alpha visits a 
bureau in their first week. Then we work out what 
our audience needs from us - not what they might 
want, or what the organisation has to say. Some 
organisations can get caught up in improving what 
they have. That’s a path to an unwieldy site. Being 
ruthless with content is the way to happy users. Then 
I would get that content researched and up. The only 
way to learn is to show people. I’d recommend having 
regular ‘crits’, where the team comment on each 
other’s work in a safe, open environment. 


net: What benefits have you seen from successful 
content strategy? 

SR: For GOV.UK, people need to understand their 
rights. A clear content strategy can, quite literally, 
keep people out of jail. For Citizens Advice, it means 
people can get guidance when they need it most. 

In both cases the benefit may not be numbers and 
website traffic, it may be knowing we are genuinely 
helping people. I think you can only count a strategy 
as successful if the audience can go in, get their task 
done and leave knowing they have what they want 
and haven’t had to work too hard for it. If you have 
a coherent message across all channels, using the 
audience’s vocabulary, you make it effortless and 
faster for the user. That’s success. □ 
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Opinion 




CAREERS 


TECHNICAL 

DIRECTION 

Justin Jewett explains why being a good technical 
director is all about the clients 


O The idea of having someone on your 
staff who directs your tech is pretty 
strange. Taken literally, it seems like 
you’re describing someone who sits above 
the developers on your team and directs 
them to do technical things. Someone who 
bills hours against your development 
budgets but doesn’t actually produce 
anything in the way of development... but 
maybe they do sometimes - it’s quite 
unclear. It seems like this is someone who 
maybe spends a lot of time in meetings 
‘getting to the strategic heart of things’. 

That’s all sort of true. But the fact that the 
title itself is vague, nebulous and carries so 
much unknown baggage with it is sort of a 
problem - for bosses, delegates and clients 
alike. Here’s the basic truth: good, experi¬ 
enced and mindful developers are quite 
considerate about hitting milestones, man¬ 
aging their workflows, fostering a healthy 
environment of co-creation and contribution 
between themselves and their peers. They 
do not need an entirely separate ‘talking guy’ 
to sit in their meetings for them. A technical 


director should not be seen as a slot that 
needs filling if your development team is 
already thriving. 

FINDING A DEFINITION 

If you do want to find someone for this 
role, the short version is that you don’t want 
this person to be too technical, and you don’t 
want them to be not technical enough. 
There’s a balance that is needed from this 
position that absolutely skews towards client 
interaction. In other words: it’s more about 
the clients than it is about the devs. 

Here are some concrete points you can use 
to help form your understanding of a tech¬ 
nical director. Firstly, what do they do? 

1 They protect developers - They protect 
their team from themselves and others, 
plain and simple. 

2 Sell - Nothing says ‘We’re serious’ like 
a robust technical understanding of what 
a client is asking for, how you might do it 
for them, and a clear description of what 
challenges will need to be addressed. 


3 They don’t develop for you - This person 
should not be sitting in meetings wonder¬ 
ing if they’re personally up to the challenge 
being discussed. It will affect how they 
think, how they talk, and how they repre¬ 
sent options to others. 

All well and good, but who are they? What 
makes a good one? It sounds a bit touchy- 
feely, sure, but there are a few character traits 
that I believe combine to make for the right 
type of person in this position. 

1 Leader - Simple enough. 

2 Strong communicator - The entire job is 
about excellent, intuitive verbal and written 
communication. 

3 Funny - This person should have a sense 
of humour about the challenges involved 
- it will charm and ultimately disarm 
clients, helping them trust you. 

4 Knows the value of saying ‘no’ - ‘Yes’ is 
not always the right answer. A responsible 
negative presented in the context of options 
and alternatives is a powerful tool that 
should be used more often. 

5 Seeks patterns - A good technical director 
has a passion for systems, but is not pre¬ 
cious about them. This person visualises 
flowcharts and efficiencies and ways to 
streamline. They understand how to work 
smart. But once they build something up, 
they are unafraid to tear it back down if 
that’s what the job calls for. 

6 Shares your vision... mostly - They don’t 
have to be a true believer in whatever it is 
you think makes your organisation differ¬ 
ent, but they should be someone you trust 
to put you best foot out into the world. It 
will also help immensely if you enjoy their 
company and point of view. 

The success or failure of a technical director 
has as much to do with how they are used 
as it does with how skilled they are. Know 
why you need them, what they’re going to 
do, and how you’d like them to affect things 
on a day-to-day basis. You’ll be surprised 
how smoothly the whole thing works if 
you do. □ 


Justin is the vice president and technical director 
at digital agency BKWLD ( bkwld.com ), where he 
oversees many aspects of the strategic, creative 
and technical phases of most projects 
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Discover the design tools set 
to revolutionise your workflow 
this year, plus we look at 
how to boost site speed by 
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#264 MARCH 2015 

We present the techniques 
you need to build your best 
ever site. Plus, a look at the 
top 20 emerging design trends 
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Based on a 6-month subscription 


#262 JAN 2015 

We reveal everything you 
need to know to build your 
first mobile app, and uncover 
the power of SVGs 


GOT AN APPLE DEVICE? 

Download net’s interactive iPad edition, or read a print replica on your iPhone or iPod Touch 
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CATCH UP ON ANY ISSUES YOU’VE MISSED 
BY DOWNLOADING OUR DIGITAL EDITIONS 



Get the low-down on the top 
JavaScript libraries. Plus, find 
out how to build a modular 
CMS in WordPress 


Explore the advanced 
techniques that will help you 
build responsive sites that 
work seamlessly on any device 



#259 OCT 2014 


Find out how to build native 
apps with Steroids, and 
explore the exciting new 
features in WordPress 4.0 



#258 SEPT 2014 

We share the SEO tips that will 
propel your sites to the top of 
Google, and show you how to 
mock-up a site with Sketch 3 



#257 SUMMER 2014 


Want to join the Sass 
revolution? We show you 
how to make the most of 
this popular preprocessor 
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#256 AUG 2014 

We reveal 12 mind-blowing 
HTML5 hacks, and walk 
through how to create code- 
free designs using Macaw 
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#255 JULY 2014 #254 JUNE 2014 


Find out how to take the pain 
out of frontend development 
with our handy Web Design 
Toolkit feature 


Discover how you can be your 
own boss with our designer’s 
guide to going freelance. Plus, 
we explore the Web Audio API 


PREFER TO READ ON ANDROID, PC OR MAC? 

net is also available on Google Play and Zinio, as well as Kindle, Nook, Windows 8 and more. 
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SAM KAPILA 


GALLERY 

/Inspirational sites 



Sensational design and superb development 



Sam is a design educator living 
in Austin, TX, exploring the 
world of responsive web 
design. She teaches web 
design at The Iron Yard 
w: somkopilo.com 
t: (cpsamkap 



Art of the Title needs your help! Support us on Patreon 




TITLE SEQUENCES 


DESIGNERS + STUDIOS - 


In Harm's Way ( 1965 ) 


Using images of water, waves, storms and explosions, Saul Bass creates a 
powerful main-on-end montage for In Harm's Way. View article 


Subscribe to Art of the Title 


JQUERY, FITVIDS.JS, SUPERMODEL, RWD 


ARTOFIHETITLE.COM 

Art of the Title artofthetitle.com , Cactuslab cactuslab.com 


O Art of the Title is an online directory focusing 
on the process, history and credits of movie and 
television opening title sequences. The site, which 
was built by New Zealand-based studio Cactuslab, 
shows how engaging an archive can be, while still 
experimenting with a modular grid and white space. 

In 2012, when the idea of responsive design was 
still fairly new, the site underwent a redesign to 
move it towards a more adaptive structure. “We 
wanted to have the feeling of a magazine, with pull 
quotes and images popping into the sides at various 
intervals,” explains site editor Lola Landekic. 


The team built the site using Cactuslab’s in-house 
CMS Supermodel ( supermodel.co.nz ). “It provided 
a streamlined, custom-made backend that gave 
us a much faster approach to article creation and 
layout,” comments site co-founder Ian Albinson. 

The site uses VimeoPro to host the title sequences, 
which are made responsive by FitVids.js. “Vimeo 
spends hundreds of thousands of hours perfecting 
its experience ... not to mention covering all of the 
hardware, hosting and bandwidth costs of video 
files for a very small annual fee,” says Cactuslab 
co-founder Matthew Buchanan. 
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Inspirational sites 


FITVIDS.JS, SNAP.SVG.JS, N 0 UI 5 LIDER, SVGS, JEKYLL 

MADEBYFIELDWORK.COM 

Fieldwork madebyfieldwork.com 


^ The new site for Manchester-based, six-person 
design studio Fieldwork is packed with character, 
bursts of colour and stunning portfolio work. 

"Playfulness is a really important aspect of the work 
we do at Fieldwork, so we had to make sure that came 
across on the homepage," says Loz Ives, who co-founded 
the studio. 

The homepage shines with delightful SVG 
designs, many of which animate on mouse click. 

One animation even reveals a secret game of Pong, 
which uses HTML Canvas and basic JavaScript. Like 
the rest of the site, the Pong game is responsive, 
and works perfectly on mobile. 

"The animation started life as a static illustration, 
and then the six of us gathered around one computer 
and worked out how we wanted the various parts 
to move," continues Ives. "It's surprising how tiny 
adjustments to tempo and easing value can make 
a big difference to the feel of an animation." 

The design is refreshingly clean, yet modular enough 
to lend itself to different content needs from page to 
page. The team utilised tried-and-tested jQuery plugins 
including FitVids.js and noUiSlider, as well as library- 
free scripts like Snap.svg to really push the animation 
and interaction. The experimentation and careful 
consideration for the user that went into building the 
site is testament to just how skilled Fieldwork is. 
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HARUKI MURAKAMI 


COMMUNITY 



THE STRANGE LIBRARY 


THE NEW ILLUSTRATED NOVEL 




* WORDPRESS, ANGULARJS, ANIMATION 

HARUKIMURAKAMI.COM 

Bluecadet bluecadet.com 


*A 


***** 



4 ^ 



«*um whamh: 


© Japanese author Haruki Murakami is known for penning novels that deal 
with duality, conflict, fantasy and reality, and that are played out through 
multiple plot lines. His new website, designed by Philadelphia-based Bluecadet 
in collaboration with Knopf Doubleday Publishing Group, captures many of his 
novels' recurring themes. 

The Library section of the site displays a selection of mesmerising 
covers of Murakami's novels. It makes use of subtle animation powered by 
AngularJS on hover states and in the background, which seduces the viewer 
into complete aesthetic bliss. The About section highlights what appears 
to be Murakami's desk, with clickable light-boxed photos of desk details 
captioned in the first person. 

The site includes a Community page, where visitors can share and read 
other peoples' experiences of the author's books. As the page loads, the 
elements animate to give the impression of a bookstore filling up with 
a crowd attending a book reading. 

Kepler Std, Andale Mono and Proxima Nova, served by Typekit and 
look lovely together and help carry the theme of duality 
through the site. They work particularly well in the Resources section, 
where they lend a delicate and elegant aesthetic to the reading guides, 
reviews and conversations of Murakami's work. 
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Inspirational sites 



RESOURCES 


“It’s such a 
beautiful website, 
and definitely shows 
that movement 
and transition 
are becoming 
increasingly popular 
and holistically 
important” 


NATALIE ARMENDARIZ 
((gDNATALIEVI) 


EXCERPTS 


UmusJ] 


HTML 5 VIDEOS, HANDLEBARS.JS 


EVERLANE.COM 

Everlane everlane.com 


O An in-house team at responsible 
clothing company Everlane has 
built a site experience that makes online 
shopping personable again. Head of 
technology Nan Yu led a team of 
designers and engineers to craft a site 
as transparent as the company’s goals. 
The pages include plenty of simply 
presented information outlining facts 
about the factories and manufacturing 
process, including a breakdown in cost 
for each item of clothing. 

Here, experience is everything. The 
company’s approachable brand ethos 
comes through in the design, right from 
the site’s “It’s nice to see you” login 


progress bar message. While snooping 
around with the developer tools, I was 
pleasantly surprised to find a comment 
inviting anyone looking at the code to 
apply to work at Everlane. 

Shopping and making returns on 
the site is easier than almost any 
online shopping experience out there. 
The site is easy to use and subtle in its 
transitions and animations (try clicking 
on an empty shopping cart), and 
product pages feature sleek photos and 
HTML5 videos to give shoppers a sense 
of how the fabric moves. Everlane is a 
model site that other online shopping 
services should learn from. 



High Quality, Low Markups 

Here's how we do it. 


3 n B 


EVERLANE 


We Sell Exclusively To You 

In traditional retail, a designer shirt is marked up 
8x by the time it reaches the customer. 

We do things differently. 
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JQUERY, SCROLLMAGIC, GREEN 50 CK 

FORBETTER.COFFEE 

Agent Pekka agentpekka.com, Craig & Karl craigandkarl.com, Nordkapp nordkapp.fi 


^ Freese Coffee's bold, clever new microsite 
was created with the help of Craig & Karl's 
brilliant illustration skills, Agent Pekka's design 
work and Nordkapp's development expertise. 

Coffee addicts can scroll through the site, 
learning the five easy steps to ensure better 
coffee from the Finnish coffee company's 
22-year old founder-barista Kalle Freese. 

The site is full of eye-opening, colourful 
illustrations and smart typography, including 
@font-face served Circular. 


Viewers scroll to follow a coffee bean as it 
is ground fresh, filtered and brewed, and poured 
into the perfect cup, using jQuery-dependent 
ScrollMagic and tweening GreenSock for 
animations. Each section includes a commonly 
asked question, which links to a typographic 
screen overlay outlining the answer. 

The site's compact content reframes 
effortlessly to different screen sizes, and quite 
a few SVGs can be found throughout the one- 
page site. 


“How whimsical! 

The content is 
simple but the 
attention to detail in 
the illustrations and 
movement of the 
page is what makes 
it really stand out.” 

NATALIE ARMENDARIZ 
(@NATALIEVI) 
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Inspirational sites 


SITELEAF, CSS ANIMATIONS & MASKS, AJAX, REQUIRE.JS, SVG 


BRIANHOFFDESIGN.COM 

Brian Hoff BrianHoffDesign.com, Carlos Gavina carlosgavina.com 


O Brian Hoff’s new responsive website 
is a masterpiece of visually stunning, 
interactive design. Hoff himself led the art 
direction, design, workflows, interactions and 
content creation, while frontend developer 
Carlos Gavina took charge of development 
and the delicate, thoughtful animations that 
can be found throughout the site. 

“We wanted a way to easily add in new case 
studies and update various parts of our site,” 
says Hoff of the thinking behind the redesign. 
The new site, which is built on top of the Siteleaf 
CMS, focuses on new and changeable content, 


including FAQs, News and Recognition, making 
it easy to feature and swap around different 
types of content such as news, blog articles, 
awards and case studies. “It’s about adding 
a little somethin’ somethin’ for everyone to 
enjoy,” smiles Hoff. 

Hoff and Gavina have built something 
inspiring, and proven that great interaction does 
not need to come at the cost of performance: 
“We carefully combed through the site and 
dropped enhancements here and there on 
certain browsers that weren’t performing 
up to our standards,” Hoff explains. 



ur 
Class 
Awaits 


How we helped design and grow a 
search engine for classes 

I Read our latest case study 


Your Next Class Awaits 


How we helped design and grow a search engine for classes 
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SHOW 

ALL 


FERRY LANDING 

NEXT DEPARTURE AT 8AM 


MOSASAURUS 

FEEDING 

SHOW 


CRETACEOUS 

CRUISE 


INNOVATIOI 

CENTER 


FERRY LAN0IN6 


EGG SPINNER 


GENTLE 

GIANTS 

PETTING 

ZOO 


O INNOVATION center 


YOUTUBE IFRAME API, LEAFLET, HTHL5 VIDEO, SVG 


JURASSIGWORLDINTL.COM 

Universal Pictures universalpictures.com 


O In late November, the new Jurassic World website 
was launched as a teaser for the 3D movie coming 
out in the summer of 2015. The whole site acts as a theme 
park marketing site, with opening hours, weather info, 
schedules, RaptorPasses, wait times, hotel info, maps and 
information on where to find the closest margarita, new 
species and safety tips on interacting with the park’s 
large residents. 

The homepage background features a looping HTML5 
video showing park visitors enjoying rides and park 
merchandise. Each sub-page is fully responsive, making 
use of an openly tracked version of the DIN 1451 typeface 
along with flat hexagonal icons (which are linked 
as SVGs) to indicate the site’s various sections. The 
code shows use of Leaflet ( leafletjs.com ) for the site’s 
interactive map and jQuery for various other interactions. 

The team hired by Universal and film production 
company Legendary worked hard to make the park site 
seem as real as possible. It even includes a link to the site 
for Masrani ( masraniglobal.com)- the oil company that 
now owns the park and genetic research company InGen 
of Jurassic World, and there’s a PDF - yes, PDF! - menu 
for the on-site restaurant named in Winston’s honour. 

If that wasn’t enough, check out the console log for a 
special message. □ 



“Hold on to your 
butts: the Jurassic 
World site is filled 
with striking imagery, 
some thoughtful 
interactions, and - if 
you look closely - more 
than a few Easter eggs” 

ETHAN MARCOTTE (@BEEP) 
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UK’S LEADING TECH NEWS 
& REVIEWS WEBSITE 

• Up-to-the-minute technology news 

• In-depth reviews of the latest gadgets 

• Intensive how-to guides for your kit 

www.techradar.com 

□ twitter.com/techradar 
13 facebook.com/techradar 
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Sublime design 
& creative advice 


THIS MONTH FEATURING. 



FOCUS ON _ 56 

RWD takes more than just throwing in a few 
breakpoints. Gene Crawford explores the 
features you need for a truly responsive site 


DESIGN 

CHALLENGE 


This month... 

PET-LOVERS’ 
SOCIAL MEDIA 



PROFILE _ 58 

Shane Mielke - aka MilkBeast - shares some 
of the stories behind creating immersive 3D 
experiences for Hollywood's biggest brands 



HOW WE BUILT _64 

Fiasco Design brought Penguin Books' vision 
to life in a site that allows users to read key 
imprint Pelican's books directly in the browser 


i_n 


CAROLINE SMITH 

A- w Caroline is a UX designer at Blonde, 
and co-founder of DabbleDabble 
P w: carolinepixels.com t: @carolinepixels 



NATALIE LARKIN 

Natalie is creative director at Big Bite 
Creative, and blogs at White Rabbit Cakery 
w: netm.og/lorkin-265t : @natty_larkin 



TOM WADE 

Tom is the technical director at small 
full-service agency SteadyGo 
w: steadygo.co.uk t: @tomwade 


BRIEF 

Social media goes mad for pets, so we'd like you to 
design a platform especially for pets and pet lovers. 

It could be a cute affair where people can share images 
of kittens, or something more serious - maybe you 
fancy designing a site to help owners find lost pets? 


52 net march 2015 

























Design challenge 



Qearoline smith 

CATCRAZER 

Accept challenges and reveal quirks to earn the Purr points that will cement your status as a crazy cat-person 


Catcrazer is a social community designed 
to celebrate those of us who have a special 
affinity for felines. Members can earn ‘Purr 
points’ by unlocking achievements, fulfilling 
challenges or admitting their quirks, to become 
the ultimate crazy cat-lady or -gent. 

The concept is pretty ridiculous, so the design 
needed to be fun, engaging and playful. Users 
earn points to move up the rankings, and it 
was important to give them a taste of this right 
from the start, to encourage them to sign up. 

Cards are defined as ‘challenges’, ‘quirks’ 
or ‘achievements’, with different rankings 
depending on the category. Points are rewarded 
when another member of the community 
accepts a photo of proof. 

Bootstrap for HTML/CSS would give me the 
flexibility to make this into a responsive site. 

I’d also make a separate API, built in Node.js, 
which would make it easy to add new features 
or new platforms like an iOS app. 


Q CLOSE UP 

(1) Hero text introduces the concept to the visitor and 
directs them via calls to action. The copy is kept playful 
and witty to reflect the brand. (2) These three example 
cards will be animated on rollover to bring the card 
that is activated to the front. (3) On the bottom half of 
the page, content is split into three rows of four cards 
- a row for each of the categories ('Tricky challenges', 
'Common quirks' and 'True achievements'). (4) Selecting 
the tabs would filter the content of these cards by either 
popularity, amount of points available or level value. 

(5) Each card has a badge made up of the selected 
category colour and an icon, 140-character headline text, 
points available, a 'difficulty', 'weirdness' or 'skill' level 
depending on the category, details of the latest member 
to upload proof and avatars of members who have 
successfully completed the card. 



El MY MONTH 

What have you been 
doing this month? 
Moved to Edinburgh 
and started a new 
job with Blonde, 
and worked on App 
Delight - a project 
for DabbleDabble. 

Which sites have you 
visited for inspiration? 
Capptivate.co for app 
interactions and 
Behance.netfor general 
creativity. 

What have you 
been watching? 

The Lego Movie on 
repeat. Everything 
is awesome! 

What have you 
been listening to? 

Lots of Goldfrapp, Ellie 
Goulding and Marina & 
the Diamonds. 
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SHOWCASE / 

/Design challenge 



B MY MONTH 

What have you been 
doing this month? 
Working on an exciting 
rebrand project for a 
US-based client. 

Which sites have you 
visited for inspiration? 

I love Pinterest - it 
houses design work 
as well as photos of 
interiors, pets, people, 
food and much more - 
great for helping you 
think outside the box. 

What have you 
been watching? 

I recently went to see 
Exodus at the cinema 
- the graphics were 
amazing. 

What have you 
been listening to? 

I'm a sucker for Taylor 
Swift. She makes me 
feel happy! 


QaTALIE LARKIN 

PETLOVE 

Match.com comes to the animal kingdom with a site that helps breeders find their pet's perfect partner 


PetLove is a dating website for animals, 
where owners can search for matching 
mates for their pets. It enables the user to create 
a profile page for their pet, including key 
features, a large profile picture, bio and image 
gallery. This could be pulled in from Instagram 
to make managing the gallery easy. 

The website has a search feature in the header 
area, which encourages people to start looking 
for a match. This would then take the user on to 
a more detailed page with filters, enabling them 
to select exactly what species, breed, colour and 
age of animal they are looking for. 

The homepage showcases ‘This week’s cutest 
pets’ which would be randomly selected from 
the newest members, refreshing on each page 
load. The website also allows users to share 
advice and get exclusive rewards - including 
discount codes for pet products like nutrition 
and veterinary treatments - that are only 
available to PetLove members. 


Q> CLOSE UP 

(1) The main aim of the homepage is to encourage the 
user to do a quick search of the animal they're looking 
for. This would then take them onto a more detailed page 
with different options, such as breed, age, colour, sex and 
so on. (2) Eye-catching, quirky illustrations sum up why 
users should join and the benefits they could receive. 

(3) The navigation would stick after scrolling past the 
header, so the user always has access to all features on 
the site. (4) The profile page gives the user a chance to let 
their pet's personality shine, whilst showing off pictures 
and quotes. (5) Similar results are listed in the left-hand 
corner to help people searching for a mate find exactly 
what they're looking for. 
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CITY SITTER 

Owners can rest assured when travelling , thanks to this handy service that helps them find a reliable pet-sitter 


I recently went abroad with my girlfriend, 
and we regretfully needed to leave our 
kitten behind to be looked after by friends and 
family. City Sitter is a networking tool for those 
not fortunate enough to have that fallback. It 
connects pet owners with prospective short¬ 
term carers who, for a small fee, can take in 
your pet and care for them. 

With a frontend listing and user peer review 
system similar to that of Airbnb (only cuter), the 
site enables connected users to have one-to-one 
communication with carers, to both inform and 
reassure them. This takes place via a centralised 
dashboard that shows messages, manages 
contact details, allows for micropayments to 
be made and provides document management 
to share information. 

I’ve created a clear and uncluttered site 
inspired by flat and material design. I’ve used 
Bootstrap for the structure across all devices and 
a central Node.js service to push content live. 


Q CLOSE UP 

(1) Payments, such as the initial rate and money for 
additional food, may be requested and sent using the 
Stripe payment gateway. (2) Images and videos can be 
uploaded to a gallery and then shared to social networks 
on hover, if the user wants to show off how cute their pet 
is. (3) Valuable information about the pet and relevant 
contacts are stored in a prominent and easy to access 
location. (4) By connecting to a tracking device, a route 
can be mapped to show where pets have been walked. 

(5) Users with multiple pets can toggle between unique 
dashboards, or choose a combined dashboard showing 
data for all pets. ( 6 ) The mobile and tablet versions 
prioritise the dashboard and messaging areas, displaying 
the carer information in a left-hand slide-out menu. 



Ei) MY MONTH 

What have you been 
doing this month? 

The online build of 
an upcoming national 
TV show. 

Which sites have you 
visited for inspiration? 
ThemeForest for 
trending design 
inspiration. 

What have you been 
watching? 

I recently finished 
rewatching Prison Break 
and have started series 
one of 24. 

What have you 
been listening to? 

I'm going to see 
Astronautalis and 
Placebo soon, so I've 
been refreshing my 
memory with their 
albums. 
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SHOWCASE 


Focus on 


Qocus ON 

FULLY RESPONSIVE 


Gene Crawford explains why, in order to make your sites truly 
responsive, you need to look beyond the breakpoints 


^ As the main editor of UnmatchedStyle. 

com, I review a lot of websites. And 
while most of them are ‘responsive’, there 
is still a very large majority that are not 
what could be called ‘fully responsive’. 

It’s worth stating here what makes up a 
responsive website. A website is responsive 
if it utilises all three of the following: 
flexible images, media queries and a fluid, 
proportion-based grid. When done properly, 
there’s true magic here. When you apply 
this responsive approach to building, 
alongside thinking mobile-first, you 
essentially future-proof your website. 

It is not enough to grab a few specific 
media queries that target popular devices 
and design for those. There are so many 
different devices - mobile and otherwise 
- out there in the world, that you simply 
can’t take them all into account. You have 
to design for the in-between stuff. The 
only way to do that is to think mobile-first 
when you are applying these responsive 
techniques to your projects. 

Herein lies the beauty that we, as web 
designers, bring to the table. What we do 
is more than simply making something 
pretty or visually slick. We get to take 
things deeper and work with how we 
communicate to the audience with the 
content, the visuals and the interactions, 
across many different mediums. It is 
a lot to keep on top of, but it is what 
separates us, as web designers, from other 
disciplines of design. □ 


□ 



Gene's mission is to work tirelessly 
to provide inspiration and insight 
for developers. His recent projects 
include unmotchedstyle.com 




(1) The Microsoft 
( microsoft.com) 
website shifts 
beautifully 
between known, 
device-specific 
screen widths and 
everything else that 


'could be' out there. 
(2) Web design and 
development firm 
Envy ( modewithenvy ; 
com) scales its 
website's elements 
well no matter 
what screen width 


you may have. It 
also utilises some 
known device 
breakpoints for major 
navigation design 
changes. (3) With 
its responsive 
design approach, 


the website for 
web design and 
development 
agency Erskine 
[erskinedesign. com), 
is a great example 
of working between 
breakpoints. 
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THE JAVASCRIPT 
HANDBOOK 

The ultimate guide to enhancing your sites with the 
most important programming language in the world 


2 ? 

PRACTICAL 

PROJECTS 


DISCOVER HOW TO: 

BUILD APPS WITH 
JS FRAMEWORKS 

SPEED UP YOUR SITES 

GET THE MOST 
OUT OF GRUNT 

GO 3D WITH WEBGL 

PREPARE FOR THE 
INTERNET OF THINGS 

CREATE STUNNING 
USER INTERFACES 



This all-new guide includes everything you need to do more with 
JavaScript, the programming language of the web. 
Through 27 practical projects, youTl learn how to speed up both 
your workflow and the performance of your sites and apps. 

Become a JavaScript master today! 


Available at all good newsagents and online at 
netm.ag/javascript-265 











EiROFILE 

SHANE MIELKE 

shanemielke.com 

This master-of-all-trades is as 
happy coding as he is animating 
or art directing... just don’t ask 
him to sit still 


Shane Mielke’s client list boasts 
some of Hollywood’s biggest 
blockbusting franchises. He’s broken new 
ground with immersive 3D experiences for 
the likes of The Hunger Games, Batman, 
The Lord of the Rings and Transformers. 
However, Mielke is adamant that the aim 
of the web is very different to that of the 
cinema. We caught up with the freelancer 
to find out what’s so good about WebGL, 
how you take direction from the likes of 
Peter Jackson, and why web experiences 
have a magic all of their very own ... 
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net: Who are you and what do you do? 

SM: Some people remember me by my 
original moniker, ‘Pixelranger’. I am 
a freelance creative director, designer, 
developer, animator, photographer, author 
and speaker working on award-winning 
interactive projects. 

net: How did you first get started in 
digital creativity? 

SM: Back in college, a friend of mine had 
a fancy computer with 3D apps, Illustrator 
and Photoshop which he used to make fake 


IDs for extra money. I stared in awe the day 
he scanned a picture of me, Photoshopped 
it into another scanned photo of Arnold 
Schwarzenegger working out, and then 
printed it out on photo paper. I was 
immediately hooked. 

After I graduated college I got a job 
working at a tiny web development 
company that wasn’t making much money 
- probably because none of us knew what 
we were doing. I worked all day and night 
those first two years but I was having so 
much fun learning that I didn’t care. ► 


Ifl INFO 

Location: Orange County, California 

Established: 1996 

Clients: Adobe, Ford, Warner Bros. 

Awards: 32 FWA Sites of the Day, 
two FWA Sites of the Month, three 
FWA Mobile of the Day, one Adobe 
Cutting Edge Award, two Awwwards 
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Epic Mickey 2 As art director, Mielke worked on 
the design and animation for this Disney game, 
including creating the main menu, storyboards and 
animation prototypes 


<90 <90 


— • 

c 

■eon i* • 


u ■»- 

ir *r 

$ 

» • *• 

• * 




( ) ( 

- 





epic Mickey 


THE 


POW 


ER 


O 


TWO 




START GAME 


ilk 


771b 


JPTIONS 

EXTRAS 


SUPERCOLIN 
(# SELECT 


^ Once I met my future wife, I knew I had 
to get serious and become more financially 
secure for the both of us. So I focused more 
on my career path and the type and quality 
of work I was doing. I started learning Flash 
and slowly moved up the agency ladder. 

net: What are your career highlights? 

SM: Launching my original Pixelranger.com 
portfolio site. A 10-year career as a creative 
director of 2Advanced. The design and 
animation of Disney’s Epic Mickey 2 video 
game. Working on projects for companies 
and global brands like Adobe, Batman, Call 
of Duty, Disney, Ford, Lord of the Rings, 
and Transformers. Being named one of 
net’s top 50 designers in 2014. 



Above The Behr ColourSmart app helps users 
see how paint colours will look in their home 
Right Memorabilia from various points in Mielke's 
life, including his work on several Star Wars sites, 
and his stint as a collegiate football player 


I’ve always said that my biggest career 
achievement is being able to do something 
I love. I thank God every day for the fact 
that I stumbled into a career that keeps me 
happy, challenged, creative and paid. 

net: How do you choose your projects? 

SM: To be honest, they’ve chosen me most 
of the time. But I think that’s because I’ve 
spent the past 15 years in the industry 
trying to cultivate a reputation for the type 
of work I like doing and want to be known 
for. Over the course of my career I’ve seen 
so many more talented people fall off the 
grid into obscurity, losing control over their 
creative destiny. For that reason I’ve kept 
an updated portfolio presence since 2002. 



I’ve also made sure to stay humble, give my 
best on every project (the good and the bad) 
and to develop true relationships with the 
people I’ve worked with. So when my genre 
of project comes up or someone needs a 
little extra muscle, I’m fortunate that 
people think of me. 

net: You have skills in a lot of different 
creative areas... 

SM: Yes. That also makes choosing projects 
a little bit easier. I can pick from all types of 
projects - design, development, animation. 
I’m not limited to any one aspect of a 
project. Everything is fun to me, so I get 
excited no matter what the project is ... 
that is, as long as I’m not doing so much 
of any one thing I get bored or rusty in 
my skills. Sometimes I’ll be juggling 
different projects at one time, designing 
in one window, coding HTML/JS/CSS 
in another while also jamming on an 
immersive WebGL-based experience site. 
Sometimes all three of those worlds collide 
in one project and then the magic happens! 

net: As a freelance art director, how 
hands-on do you like to be? 

SM: I like to lead by example. While I can sit 
back and just lead a team if needed, I’m one 
of those old-school black unicorns who 
likes to play on as many aspects of a project 
as I can. That’s where the fun is at. I’ll 
wireframe, design, render, photograph, 
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Batmobile experience This site celebrating the conclusion of the Arkham game series saw Mielke clipping 
his toe into WebGL for the first time. He worked with three.js and handled design, code and animation 


build, code and animate everything from 
start to finish if I need. There is no task too 
big or too small that I can’t or won’t do. 

net: The Batman: Arkham Knight - 
Batmobile Experience ( netm.ag/bat-265) 
is an amazing feat. What would you say 
are the site’s biggest achievements? 

SM: That was my first WebGL project 
so everything in the site was a big 
achievement to me! I had to literally learn 
everything as I went - I went through lots 
of tutorials and source code, constantly 
searched Google and StackOverflow.com 
and bugged friends who were more 
knowledgeable than me. 

The biggest achievement was actually 
getting final approval. The team at Five & 
Done ( fiveanddone.com ) put in a lot of time 
pushing for the concept - the experience 
was almost just a basic image gallery, which 
would have been tragic. Warner Brothers 
was very sensitive about featuring the 
Batmobile in a WebGL setting unless it 
looked exactly like it did in the game. Since 


we couldn’t guarantee that, we came up 
with a treatment that felt holographic and 
creative enough to differentiate itself from 
the game version. 

net: You do a lot of work with film 
studios. How cinematic do you think the 
web can become? 

SM: The web has its own version of 
‘cinematic’ which is completely different 
from what you experience in a movie. It’s a 
magical mixture achieved by combining all 
sorts of different creative assets and tools 
to create a unique interactive experience 
that doesn’t have to be 100 per cent 
realistic. It can look however we want it to 
as long as it is authentic and compelling. 

Nothing will ever compare to real photo 
or video content. Even though CG has 
become very real-looking, we still have 
blockbuster movies with multimillion- 
dollar budgets that took years to make, 
where it is easy to pick apart the CG bits. 
For the most part our eyes know when 
we’re looking at something that was 


Profile 



SHANE MIELKE 

Little things that make 
your life worthwhile 

Websites: StackOverflow.com, 
Duolingo.com, Youtube.com 
Apps: Instagram, Snapseed, Rhapsody 
Reading: Learning to Breathe Fire 
by J.C. Herz 

What do you have 
on the walls? 

Shelves with mementos from past 
projects and video games. I also have 
pictures of my father and grandmother 
who passed away last year. 

What will you do for lunch? 

I've always eaten my lunch at my desk. 
This means I can spend more time with 
my family or on any other activities 
I might want to finish my day with. 

What hours do you work? 

I sit down to work around 10am and 
work uninterrupted until A-5pm. I avoid 
any work in the evenings or weekends 
unless there is a project launching that 
needs some extra time. 

What else do you do in 
the office? 

I always have movies or music playing in 
the background. Once the kids get home 
from school, they individually come into 
the office to read or do homework. 

How often do you hang out 
with other designers? 

There are a few local designer and 
developer friends and we all have 
season passes to Disneyland. Every 
couple of months we meet up to get 
the kids together. 

Describe your working culture 
in three words ... 

Organised multi-tasking chaos. 
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A look at the dates that shaped 
Shane Mielke's career 


OCT 1996 


Uses Photoshop and HTML 
for the first time 

V 


JULY 1997 


Starts career as designer 
V 


AUG 2000 


Gets married 
V 


JAN 2001 


Starts learning Flash 
V 


NAY 2002 


Launches Pixelranger.com portfolio site 
V 


AUG 2002 


Joins the team at 2Advanced 
V 


NAY 2005 


First daughter, Tristen, is born. Second 
daughter, Taylor, follows in 2008 

V 


NOV 2012 


Works on design and animation 
for Epic Mickey 2 

V 


DEC 2012 


Leaves to start freelance career 
V 


DEC 2013 


Launches The Hobbit: The Desolation 
ofSmaug movie website 

V 


JAN 2014 


Starts experimenting with 
WebGLand Canvas 

V 


JUN 2014 


Takes on first WebGL project: Batman: 
Arkham Knight - Batmobile Experience 



© 



* 

MM 

* «. 1 

$ , 

@ 

❖ 


^ created on a computer. Expecting loo per 
cent cinematic reality in the window of a 
browser just isn’t realistic. 

net: What technologies are getting you 
excited at the moment? 

SM: Canvas and WebGL development are 
skills I’ve picked up over the past year- 
and-a-half that really have me excited. 

The possibilities are endless, and the web 
feels fun again. Pm especially excited 
about the three.js 3D library ( threejs.org ). 

It was used on the Batmobile Experience 
site. It’s a rush to see immersive 3D 
working in the browser on both desktop 
and mobile. 

net: When you’re working with a big 
studio’s intellectual property, how 
involved are they creatively? 

SM: It depends upon the studio and project. 
Some studios want me to bring my years of 
experience to a project. They typically let 
me run with everything, which is a lot of 
fun but can also be a little stressful. Other 
studios know exactly what they want, 
giving me lots of direction. In those 
situations it’s my job to fulfil their vision 
without any ego whatsoever. 

It gets really interesting when the actual 
director of a movie is involved and must 
approve all creative. I’ve had that happen 
with Michael Bay on several Transformers 
projects and Peter Jackson on the Lord of 
the Rings work. It’s a stressful rush 
knowing that people like that are reviewing 





The US Open sessions This project saw Mielke 
create visuals based on live tennis stats for 
IBM and Tool of North America 

your work. When the director of a film picks 
a design direction or tells you to change an 
image or a colour, there’s no arguing it. 

net: Do you ever yearn to make something 
that’s simple? 

SM: I actually love clean, simple design 
- it’s just that I’m seldom asked to do it 
professionally. I let my simple side shine 
through with my photography ( terraspirit . 
com). I try and avoid using Photoshop or any 
extreme editing. I see some people using 
extreme HDR techniques, and their images 
look like they were fried in a microwave. 

I try to not use Photoshop as a crutch to 
make up for my lack of technical skills with 
the camera, so I do all of my edits with the 
settings on the camera if possible. 

net: Should we really call you MilkBeast? 

SM: That was a nickname given to me by 
my friend Bradley G Munkowitz (aka 
Gmunk). The first part comes from how 
my last name is pronounced ‘Milky’. 

Beast comes from the fact that I’m a former 
collegiate football player and CrossFit 
junkie who works out five or six times 
a week, and sometimes multiple times 
a day. So I’ve been told I don’t look like 
a stereotypical designer/developer - hence 
the name ‘MilkBeast’. I always liked the 
sound of it, so I threw it on my website as 
a joke to see if people would use it. □ 

Next month: We chat to creatives 
at international agency thoughtbot 
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QoW WE BUILT 

PELICAN 

Fiasco Design and Penguin Books came together to create a flexible 
new site that brought a key imprint to a connected audience 
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Economics is not alone in 
appearing to be more difficult 
to outsiders than it really is. In 
any profession that involves 
some technical competence 
- be it economics, plumbing or 
medicine - jargons that 
facilitate communication 
within the profession make its 
communication with outsiders 
mote difficult A little more 
cynically, all technical 
professions have an inccnl 
to make themselves look more 
complicated than they really 
are so that they can justify the 


BRIEF 

When Penguin came up with a 
new way for Pelican books to be 
read online, through the browser. 
Fiasco Design was tasked with 
bringing its vision to life. The 
result needed to be accessible 
and distinctive, as well as simple 
to use, requiring little to no 
explanation or direction. 


CjCLOSE UP 

(1) As part of the relaunch of the brand, the iconic 
Pelican logo was redesigned and brought soaring 
into the 21st Century. ( 2 ) Getting the reading 
experience on mobile right was so important for 
this project. Offering the option to adjust the font 
size means the user can customise their experience 
to suit their personal preferences. ( 3 ) Once users 
purchase a book, it's added to their library so they 
can pick up where they left off and start reading 


wherever they are. ( 4 ) The books on offer include 
rich media such as images, video, maps and 
animated graphs, all of which are built to work on 
any device. ( 5 ) The site was designed mobile-first as 
it was expected that the majority of users would be 
using the site on the move, rather than on desktop 
devices. ( 6 ) The front covers are just as distinctive 
on a smartphone as they are in paperback, helping 
to support and reinforce the Pelican brand. 
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How we built 



BEN 

STEERS 


TOM 

MORRIS 





Ben is co-founder and creative 
director at Fiasco Design, 
a freelance designer and 
perpetual doer 
w: fiascodesign.co.uk 
t: (cpBenSteers 


Tom is a Bristolian designer, 
poet and preacher who loves 
imagining better communities. 
He is head of digital at Fiasco 
w: fiascodesign.co.uk 
t:@TomMorris1988 


Matthew is a cover designer 
for Penguin. He's also a web 
developer and occasional 
illustrator and animator 
w: mymymy.co.uk 
t: (cpmatthewoyoung 


Having already worked with 
Penguin on a number of web 
projects, Bristol-based Fiasco Design 
was asked to pitch for the creation of 
an innovative new website for Penguin 
imprint Pelican (pelicanbooks.com). Its 
aim? To offer a way for users to read 
Pelican books online, bringing the iconic 
brand into the 21st century and attracting 
a new, connected audience. We spoke to 
creatives involved to find out how they 
took up the challenge. 

net: How did the project come about? 

MY: In early 2013 we were informed that 
the Pelican imprint was being relaunched. 
The two keys things in the brief were that 
these books needed to be accessible, and 
they needed to be distinctive. I suggested 
that to make the books truly accessible, 
and to reach a young, connected audience, 
we should make them available to read 
online. We spent a long time discussing 
things, conducting research, and working 
out the direction for the site, and then 
in December 2013 we brought Fiasco on 
board to help turn the idea into a reality. 

net: What was the brief? 

BS: The vision was to create an innovative 
way for Pelican books to be read online 
through the browser, removing the need 
for e-reader type devices, which have 
limitations. The site needed to be simple 
to use and user journeys needed to be 
as short as possible. The design and 
functions had to be straightforward and 
require little to no explanation - the fewer 
buttons and options available, the better. 


net: How closely did you work together? 

BS: We worked closely with Penguin 
throughout the duration of the 11-month 
project. We set up a fairly rigid timeline 
and worked in week-long sprints, meeting 
every Friday afternoon to demo and 
review all the work from that week. This 
was really effective as it helped keep the 
project on track and iron out any issues 
that occurred along the way. 

net: What kind of research did you carry 
out before turning the first pixel? 

MY: A few years ago I wrote a dissertation 
on the subject of legibility and readability, 
studying in depth how people read and 
process information, so that informed 
a lot of my initial thinking. We also 
researched our target audience, how 
they might use the site and what features 
would be most useful to our readers. 
Obviously we researched the competition, 
the technical constraints, browser support 
and so on. 

net: At the start of the project, what were 
the key technical decisions you took? 

TM: Most of our technical decisions were 
built into the brief itself. Early on, we 
recognised the need for effective social 
sharing functions and small details. We 
saw the need for a really tailored outcome 
and so left alone more popular CMSs like 
WordPress, in favour of Keystone and 
working with Node.js, which didn’t have 
lots of unnecessary functions built in. 

It was also really useful to use version 
control, as it was a highly collaborative 
process between us and Penguin. 




TINELINE 


The Pelican project 
in milestone events 


MARCH 2013 


It is announced that the Pelican imprint 
is to be relaunched 
V 


MARCH 2013 


Matthew Young builds a prototype 
responsive website and pitches the idea 
of books in the browser 

V 


APRIL-JUNE 2013 


Penguin researches the potential of the 
concept and pins down its strategy 
V 


DECEMBER 2013 


Fiasco Design is brought on board to 
help design and build the site 
V 


OCT 2013-5EPT 2014 


The online books and paperback books 
are designed at the same time, ensuring 
everything is coherent and works well 
across all formats 
V 


MARCH-SEPT 2014 


Fiasco builds the foundations 
of the site - a Node.js app running 
Keystone for the CMS 
V 


ONGOING 


Penguin reviews and iterates 
the site frequently 
V 


ONGOING 


The site is thoroughly tested across 
different devices, browsers and 
operating systems to check for errors 
V 


NOV 2014 


The site launches with five books 
available to buy and read online. More 
books will be added throughout 
2015 and beyond 
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How we built 
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INTRODUCTION 

Life, The Universe 
and Everything 

WHAT IS ECONOMICS? 

“fr* “V"« - -cj, the 




Devolution 

A look at how the Pelican website evolved over 
the course of the 11-month project 

(1) Initial wireframes of the website were drawn out on Post-it 
notes. (2) The very first prototype was a very basic, one-page 
responsive website, with a big emphasis on typography and 
hierarchy. (3) Early cover experiments looked at establishing 
a responsive cover that worked at any size, in print and online. 
(4) The menu is designed to be clear and easy to use, and very 
distinctively 'Pelican'. (5) Pelican books aim to offer the best 
possible reading experience for any format, and any screen size 
or resolution - including rich media elements such as charts. 
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Pelican books can be read on any device, right here in your browser. 
Try the first chapter for free. If you’d like to read more, you can buy 
the whole book. 


CHOOSE A BOOK AND START READING > 


Keeping it simple The site design was stripped back to include as few elements and buttons as possible 


^ net: Can you talk us through the design 
and typographic decisions you made? 

MY: For me legibility is the most 
important part of the whole site 

- my aim is to provide a comfortable, 
enjoyable reading experience. That’s 
relatively easy to achieve in print, where 
I’m used to having extremely fine-grained 
control of the typography and layout of 
the page. However, when designing for 
the web it’s a completely different story 
due to the profusion of different devices 
and resolutions. What we created needed 
to offer the best reading experience no 
matter how you’re reading these books 

- be that in paperback, on an old 
smartphone, the latest tablet, a huge 
desktop monitor, or anything else. 

I had to find typefaces that work just 
as well online as they do in print. I chose 
Brandon Text for headlines and Freight 
Text for body copy. Both have generous 
x-heights and come with good web font 
versions, manually hinted for use on 
screen at different sizes. 

net: What are the key constituents 
of a good reading experience? 

BS: Generally, it’s about effective 
communication of content. For this 
project, though, we had a rare opportunity 
to design for a longform, more formal 
reading experience. Here, maximum 
comfort was essential to avoid distractions 
from the informative subject matter. So 
we focused on classic typographic rules 
concerning line-lengths, letter spacing 


and font sizes. The digital format also 
meant we could accommodate for certain 
personal preferences with custom type 
sizing features. 

MY: A good reading experience is one 
that is easy and comfortable. The line 
lengths should be in the sweet spot 
between 45-70 characters long, and there 
should be a generous amount of white 
space around the lines. You want the text 
to have good contrast, but not too stark, 
and any navigation should be seamless. 

net: Which technologies did you use? 

TM: We built the website with Node.js, 
using MongoDB for the database and 
Stripe for making payments. All that was 
managed through Keystone as a CMS, and 
we compiled our CSS using Sass. We kept 
track of everything with the Git version 
control system. 


net: Did mobile present any challenges? 

MY: Mobile does present an interesting 
challenge, particularly when it comes to 
non-textual elements. I’ve read ebooks 
where I’ve come across a table or a map 
and it’s been too small to interpret. We put 
a big effort into making sure all non¬ 
textual elements are legible and easy to 
understand, even at small screen sizes. 

net: Do you think browsers will 
eventually take over from e-readers? 

TM: We do. Rationally speaking, they 
should. But people are not always so 
rational. We wrote a blog post a while back 
explaining some of our thoughts on this 
( netm.ag/blog-265 ). Essentially, the unique 
benefits that e-readers provide are going 
to be superseded by devices very soon. 

MY: The web is thriving at the moment, 
and web apps are becoming more useful 
and more powerful. In theory at least, 
web apps can do almost anything an iOS 
or Android app can do - and I’m not just 
talking about e-reader apps here. The 
added advantage of doing things in the 
browser is that it’s completely device¬ 
agnostic and can be accessed anywhere 
on any OS. However, I think there’s still 
a long way to go before the web starts to 
replace dedicated apps completely. 

net: What’s the reaction been like? 

MY: Great! Since we launched, the average 
time on site has been 26 minutes - or 
36 minutes for logged-in users - which 
shows people are really engaging with the 
content - and many readers are sharing 
extracts on Facebook and Twitter. □ 


Why Are People Not Very Interested in 
Economics? 

Since you have picked up this book, you probably have at least a 
passing interest in economics. Even so, you may be reading this with 
some trepidation. Economics is supposed to be difficult - perhaps 
not physics-difficult but demanding enough. Some of you may 
remember hearing an economist on the radio making an argument 
that^HH|^B^H|||||P|||^B-copting it because, after all, he is 


SHARE HIGHLIGHT 


the read a proper book on economics. 

But is economics really that difficult? It doesn’t need to be - if it 
is explained in plain terms. In my previous book, 23 Things They Don't 

Sharing The design encourages readers to interact, and share content on social medial 
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Classic animation 
principles can help you 
create amazing interface 
animations. Val Head 
gives you a crash-course in 
motion design for the web 

M otion design is a necessary 
skill for the modern web. 

With web animation really 
starting to hit its stride, 
everyone from UX designers 
to frontend developers needs an 
appreciation for what motion can 
add to their work. 

Animated interactions are already 
commonplace in our native apps and 
operating systems. The web may be 
behind these platforms in its animation 
capabilities right now, but we’re 
catching up fast thanks to the constant 
improvement of browsers’ rendering 
and support of web animation options. 

Soon the character and energy that 
motion brings to an interface will be 
the norm on the web too. Motion is 
starting to find its way into our web 
design process and being recognised 
as a valuable interaction design tool. 

These are exciting times! 

While animation has a lot to offer 
in all aspects of design, I won’t be 
going into too much detail on how 
animation supports UX here (I cover 
a few examples in this A List Apart 
article: netm.ag/UX-265). This article 
is all about developing an eye for 
motion and putting traditional 
animation principles into practice. 

Great interface animation is useful, 
conveys information and does it with 
restraint and style. That’s a tall order, 
but it’s not out of reach. Restraint and 
style is where motion design skills ^ 
come in. Well designed motion keeps 
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Inspired by the art of Yayoi Kusama, Dots was created with the 
notion that beauty and fun are not mutually exclusive. Dots is a 
minimalist game that was designed to be a soothing experience. 
But dig deeper and there is a depth of challenging gameplay for 
more competitive players. ► 


fk AppStore 




f 


D#TS 


Join two brave dots as they traverse arctic tundras, navigate 
fiery jungles, and plunge the ocean depths. TwoDots is a 
modern-classic puzzle game where you simply connect cobred 
dots to score points and complete objectives. Sharpen your skills 
across 185* levels while uncovering many exciting new features 




Bouncy The bouncy motion of the dots in Dots conveys 
an energetic playfulness and creates momentum 


our audience focused on the quality 
^ experience instead of distracting them 
with awkward bells and whistles. 

Classic animation principles 

The bible of animation, if there were 
one, would be The Illusion of Life by 
Disney animators Ollie Johnston and 
Frank Thomas ( netm.ag/illusion-265 ). 
This book features the 12 guidelines 
by which Disney imitated life in its 
animated films. 

These principles are time-tested 
and even though they’re written for 
an entirely different medium, we can 
apply them to animated interactions 
with great results. Learning to identify 
each of these principles will help you 
develop an eye for animation and give 
you a basis for evaluating and designing 
interactions. The 12 classic principles 
are: squash and stretch, anticipation, 
staging, straight ahead and pose to 
pose, follow through, slow in and slow 
out, arcs, secondary action, timing, 
exaggeration, solid drawing and appeal. 

They don’t all apply equally to our 
efforts in interface animation, but it’s 
still helpful to know what each entails. 


We’ll take a closer look at the three 
principles that are particularly key to 
interface animations: timing, secondary 
action and follow through. 

Timing & spacing: 

It really is everything 

My improv teacher always tells us 
that timing is the key to comedy. 


As it happens, timing is also the key 
to animation. In animation, timing is 
all about speed. 

In the classic text, it’s said that 
correct timing makes an object appear 
to obey the laws of physics. It gives 
cues as to the weight of an object and 
which forces have acted upon it. When 
it comes to interface animation, our goal 
isn’t always to replicate the physical 
world, though. We tend to focus on the 


aspect of timing that establishes an 
object’s ‘personality’. So much can be 
communicated through timing! 

For web animation, spacing 
comes down to the easing (the timing 
function) that we apply to an animating 
property. Easing determines how speed 
changes occur across the duration of an 
animation. That’s how we indicate mood 


and personality. The duration of an 
animation also plays a role here, but 
the easing does most of the talking. 

Strong bouncy timing, like the 
motion of the dots in the Dots game 
( weplaydots.com), conveys an energetic, 
playful feeling. It can often feel even a 
bit childish at times. Scroll down on the 
game’s website for a short animation 
and look closely at the way the dots 
move - when they fall into place they 


The lljusjon ofUfe features the 12 guidelines by 

which Disney imitated life in its animated films. 

These principles are time-tested and we can apply 

them to animated interactions with great results 
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Linear easing The animating object moves the same distance in each frame, to give a steady speed 


S slides 

Explore features Pricing Sign in 


) Import PDF and PowerPoint documents as image slides. 


| The developer mode adds developer-friendly features. 


such as a per slide HTML editor. 


) Use the Math block to seamlessly display math formulas 


In your decks. 


j Learn more about your audience with the new Google 


Analytics integration. 


j Never worry about losing any of your work. The revision 


history Is now available to everyone, for free! 


Slides Each of the items in the Slides timeline overshoots its destination then comes back, creating the follow through 


bounce back up a little. The bounce is 
short, which informs us the dots have 
some weight to them. 

At the other extreme, linear easing 
appears mechanical and lacks life. 

Linear motion holds the exact same 
constant speed across the entire 
duration of the motion; there’s no 
slowing down or speeding up at all. 

It’s pretty much impossible in the real 
world, thanks to things like gravity! 
Linear easing communicates nothing 
useful about the mass or nature of the 
moving object. 

The funny thing about timing is that 
despite its potential to communicate, 
and all the effort we might devote to 
choosing it, all animations have to 
happen fast. One of the biggest motion 
design crimes out there is to make 
your UI animations too slow. It takes 
practice and iteration to get timing right. 
Prototyping animations is very effective 
for getting your timing down. 

Secondary action: 

The supporting actor 

Secondary action is additional motion 
that compliments, or occurs as a reaction 


to, the primary motion. In traditional 
animation, this might be something 
like a character whistling or moving 
her arms around while she walks. In 
interfaces, it’s how nearby elements 
move in reaction to the main motion. 

Websites and apps can’t whistle or 
move their arms, so the opportunities 
for secondary action aren’t always as 
obvious. However, they do have related 
elements and elements that move 
together. Those are prime candidates 
for secondary action. 

A good example is the ‘Remember me’ 
function in Stripe Checkout’s payment 
flow ( stripe.com!checkout - see overleaf 
for more on this). The expansion of the 
form is the primary action, and the 
additional form elements flipping down 
into view is the secondary action. They 
work together to gracefully expand 
the form and draw your attention to 
the additional options. 

Follow through: 

Overshooting just a little 

Follow through and overlapping action 
are two very closely related concepts 
that deal with how an object comes to 


Timing functions 

In CSS we have keywords such as IBHS1 . 


ease-in | ease-out | ease-in-out Hffl linear 


to define the easing option for the IflnBH 
[jlRHffifil property. On its own, this looks like 
a terribly restrictive list. Thankfully we have 
cubic Bezier functions to open up our easing 
options. These let us define nearly any 
easing we'd like to see. 

Cubic Bezier functions are written as 
a list of four numbers, like so: HIBBH 
EggHEBEKEl That example is the 
cubic Bezier version of the ISH3 keyword 
in CSS. They're not the friendliest looking 
things and it's difficult to infer the easing 
represented by the numbers. 

Cubic Bezier functions can also be 
expressed graphically, as a curve. The 
numbers represents the points required 
to draw the curve, and it's much easier 
to read and edit them in graph form. 

These graphs plot the progression of the 
animating property against the time it 
takes to complete the animation. The curve 
represent the rate at which changes in the 
animating property occurs. Steep areas of 
the curve represent a faster rate of change, 
while flatter parts of the curve represent a 
slower rate of change. 

Cubic-bezier.com and Ceaser (matthewlein. 
com/ceasei) let you create and customise 
cubic Bezier functions by manipulating 
motion curves. Ceaser also gives you 
additional presets for the popular Penner 
easing equations. I highly recommend these 
or other tools to expand your easing options. 

For even more about cubic Beziers, 
this kirupa tutorial covers it all: netm.ag/ 
kirupa-265. 



Easing in The easing curve for the ease-in is flattest at 
the start, where rate of change is the slowest 















Case Study 

Stripe Checkout 

Stripe Checkout is a stellar example of 
web Ul animation that's fully ingrained 
as part of the overall experience. I asked 
Michael Villar of Stripe (pictured above) 
about the team's process. 

Villar described the design process 
as having two main phases: wireframe- 
supported explanations of ideas, 
and simple prototypes that put the 
most promising ideas to the test. 

It's a delicate process. "Finding the 
right animations and transitions is an 
ongoing process, and one that takes 
time," explains Villar. 

I brought up the subject of challenges 
specific to executing an animation- 
focused design on the web. The answer, 
unsurprisingly, was browser technology. 

"We found endless bugs and glitches 
while trying to push the limits of 
the browsers to achieve smoother 
animations. And it still happens: 
with each browser update, things in 
Checkout can break," Villar says. 

If you're using the latest technology, 
dedicating time to addressing browser 
issues is a necessary evil. However, 

Villar rightly points out that as web 
animation sees more use and interest, 
browser support issues are being 
resolved quickly. "Browsers will be 
required to become more stable and 
improve their capabilities," he suggests. 
"It's already happening." 

Stripe primarily uses CSS transitions 
triggered by JavaScript for its checkout 
animations. There isn't a popular 
framework or library behind them, 
as the Stripe team found it saw better 
performance from lower-level options. 

"If you can use CSS transitions or 
animations triggered by JavaScript, 
please do it," urges Villar. "If you need 
more control over animations, you can 
use IKBIEBHiB!BnB!iH8BB3. but you'll 
have a performance drawback." 


^ a stop. Follow through is the motion of 
overshooting the final destination by a 
small amount and then coming back to 
settle into place. 

In the Slides changelog timeline 
C slides.com/changelog ), each item in the 
list shoots out a little further than its 
destination before settling back to a stop. 
That’s follow through in action. 

Similarly, overlapping action is the 
concept that not all parts of an object 
come to a stop at the same time. For 


Putting it into practice 

It’s fun to read about these principles, 
but they’re more useful when we put 
them into action. Let’s take a stab at 
putting these techniques into practice 
with some CSS animation. 

For this part, I’m assuming you have 
some background in CSS keyframe 
animation. If you need a refresher, this 
post by Rachel Cope will get you up to 
speed in no time: netm.ag/keyframe-265. 
Our example is an animated alert box 


Unless you're working with some sort of 
physics engine, you'll be faking or approximating 

these concepts with easing choices or keyframe 

placement. There's nothing wrong with that 


example, a dog’s floppy ears keep 
moving forward even after their body 
has come to a stop. 

Unless you’re working with some 
sort of physics engine, you’ll be faking 
or approximating these concepts with 
easing choices or keyframe placement. 
There’s nothing wrong with that. 
Hinting at these familiar concepts with 
any type of animation goes a long way 
to creating a more realistic feeling. 


that confirms your booking at a fictitious 
cat cafe. It animates onto the screen 
to let us know our booking task has 
successfully been completed. 

See our starting point at netm.ag/ 
cat-265. At the moment it’s a bit, well, 
lacking. Our alert box does the bare 
minimum: it animates into view, 
followed by the associated button, which 
fades in below it. There’s nothing all that 
compelling about it... at least not yet. 



Stripe checkout The 3D rotation part of the form-expanding animation in the Checkout flow is an example of secondary 
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A timing check 

Timing is always a good one to start 
with. Our alert box is using the ease- 
out timing function, so it comes in at 
a higher speed and then slows into place 
in a low-key kind of way. Not bad, but 
it’s still a little lacklustre considering 
the task at hand. 

This is the last step in our transaction. 
We’ve just finished our task and booked 
something fun and exciting (at least, if 
you like cats). A little more energy and 
excitement is in order for this situation! 

A change to our easing will help take care 
of that. 

We’ll keep the general feel of an g 
but we’ll amp it up with a custom 
cubic Bezier function created on cubic- 
bezier.com. We’ll have our new easing 
shoot out past the end point and then 
snap back into place. 

Our new animation now reads: 


animation: slideln .85s cubic-bezier(0.175, 
0.885, 0.320, 1.275) both, fadeln 0.25s ease- 
in both; 


With that change we’ve accomplished 
two things: We’ve created follow through 
action by having our box overshoot its 
destination. We’ve made the motion feel 
more energetic by using a curve with 
more drastic speed changes. See our 
example now: netm.ag/cat2-26s. 

It’s still too slow, but we’ll address 
that at the end. 

Some secondary action 

Our button is a prime candidate for 
some secondary action. It’s related to 
our main alert box, and it can appear 
slightly afterwards. Its delayed fade-in 
hints at some secondary action, but we 
could create a more dramatic effect by 
having it slide out from under the body 
of the alert box, as if it’s sliding down 
into place as a reaction to the alert box’s 
upward motion. 

To accomplish this, we’ll add one set 
of keyframes for that slide down action: 

(cpkeyframes slideDown { 
from {transform: translateY(-120px)} 
to {transform: translateY(O)} 

r 



Basic motion To start with, everything in our example moves in and animates at once, like one solid connected object 



Ease out This is the easing our example starts with, 
using the ease-out keyword in CSS 



Follow through Contrast this with our ease-out easing. 
The curve extends past the top, creating the follow through 


Add that animation to our button in 
addition to its fading in, with slight 
delays on both so they happen when 
the main motion has mostly completed: 

button { 

animation: slideDown A25s .55s cubic- 
bezier(.03,. 16,39,0.99); both, fadeln .6s .5s 
cubic-bezier(0.550, 0.085, 0.680, 0.530) both; 
} 


It’s already looking like a much more 
sophisticated and energetic animation! 

Adding some overlap 

All of the content within our alert box 
is moving at the same rate, like it’s a 
flat piece of glass with the text etched 
onto it. This doesn’t fit with our goal 


of creating an energetic, fun mood 
with the motion. Animating the text 
inside the box separately will create 
some overlapping action to give the 
motion more life and create the effect 
of energy transferring from one element 
to another. 

To accomplish this, I’ll add one more 
set of f° r a less pronounced 

slide in. I’ll apply these to the h2, h3 
and the paragraph inside the box, 
each with a delay. The new set of 
keyframes is a shortened version of 
our BEHGI animation: 


@keyframes slidelnShort { 


from {transform:translateY(80px);} 

to {transform:translateY(0);} 


} 

... p. 
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Resources 

Adding motion 

Recommended reads on adding meaningful 
motion to interfaces: 

• 'Provide meaning with motion' by Paul 
Stamatiou ( netm.ag/stamatiou-265) 

• 'Ul animation and UX: A not so secret 
friendship' by Val Head ( netm.ag/head-265) 

• 'Transitional Interfaces' by Pasquale D'Silva 
(netm.ag/dsilva-265) 


Traditional principles 

These are some good starting points for your own 

research into traditional animation principles: 

• The illusion of life: Disney animation by 01 lie 
Johnston and Frank Thomas ( netm.ag/ 
illusion-265) - The classic text referred to 
by many in the industry 

• Illusion of life Tumblr (thel2principles.tumblr. 
com) - The book above summarised in video 
and Tumblr form 


Galleries 

These are a great place to explore inspiration 

and trends in Ul animation: 

• Art of The Title (artofthetitle.com) - It's not 
Ul, but title designs are wonderful inspiration 

• Hoverstat.es ( howerstat.es ) - A gallery 
celebrating great interaction design and 
frontend development 

• Use Your Interface ( useyourinterface.com ) - A 
library of transitional interface design patterns 
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Left In our final version, the alert box container, text content 
and button animate in with complimentary motion 

Below One of my favourite sources of motion design 
inspiration! Art of the Title features breakdowns and 
case studies galore 



^ All three elements are assigned that 
animation with varying delays: 

animation: slidelnShort 0.3s cubic- 
bezier(.03 f . 16,39,0.99); both, fadeln 0.15s 
cubic-bezier(0.550, 0.085, 0.680, 0.530) both; 


Our example is really starting to shape 
up now: netm.ag/cat3~265. 


Sass variables to manage delays 
and durations 


Sass can save you some headaches when 
it comes to adjusting related durations 
and delays. I like to set my related 
durations and delays relative to a global 
Sass variable - like f° r example 

- then multiply that variable as needed 
for related delays and durations. It’s a 
huge time-saver. 


Final touches and speeding 
the whole thing up 

We tend to keep animations slower than 
they need to be while we’re designing 
them. And for good reason: we need to 
see what’s happening in order to make 
our design decisions. 

It takes much less time to ‘read’ 
an animation than it does to design 
it, though. Our eyes and brains work 
very quickly when reading motion, so 
speeding up our animations is almost 
always necessary - sometimes as 


drastically as half the speed. Don’t be 
shy in chopping these durations down. 

To finish off our example, we’ll cut 
down the durations and adjust the 
delays accordingly. Optionally, we can 
also add in some Sass variables for the 
cubic Bezier values and durations to tidy 
things up. See our example in its final 
state here: netm.aglcat4.-26s. 

After those few tweaks, our alert 
box animation is looking much more 


that’s on the rise. I wholeheartedly 
agree with anyone putting animation 
on their list. Browsers are getting faster 
and more consistent with every new 
web animation technology that emerges. 
This is a big part of why web animation 
is starting to really capture the attention 
of designers. 

It’s not the only reason though 
- I’ve also noticed a change in the 
industry’s attitude towards animation. 


We're no longer looking for ways to justify why 

animation should be there. We're instead looking 

for ways to create the kind of interface animations 

that are designed with purpose and style 


polished. All the motion involved has 
been aligned to the message we wanted 
to convey, using a few of the classic 
animation principles. 

These techniques, along with the other 
eight in the list, can be applied to nearly 
any web animation task. The more we 
put them into practice, the better our 
motion design skills will become. 

Is 2015 the year of web 
animation? 

Many of the ‘Web design trends for 2015’ 
lists have included motion as something 


At conferences and workshops, I’m 
noticing that the most common 
questions I’m being asked are starting 
to change from ‘Why should I bother?’ 
to ‘How can I use this well?’ 

We’re no longer looking for ways 
to justify why animation should be 
there. Instead, we’re looking for 
ways to do it well. To create interface 
animations with purpose and style. 
High fives all round for that! There 
are a lot of talented web designers out 
there and I’m excited to see what you 
do with animation. □ 
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15 awesome 
Sketch plugins 

Rafael Conde walks you through 15 of his favourite 
Sketch plugins, where and how you can get them, 
and how to make the most of them 


m AUTHOR 

RAFAELCONDE 


Rafael is a designer and 
developer at Imaginary 
Cloud. He co-founded 
SketchCasts, a series 
of weekly screencasts 
exploring Sketch 
rafaelconde.net 


S ketch is becoming more and 

more popular amongst designers 
and developers as their web 
and UI design tool of choice. 
What some may not know is that there 
is a diverse and powerful community 
of people working to extend the 
functionality and features of Sketch by 
building custom plugins. In this article, 

I will run down some of my favourites. 

1 SKETCH TOOLBOX 

sketchtoolbox.com 

Sketch plugins are scattered all around 
the web, mostly on GitHub, and it can be 
very hard to discover them. Thankfully, 
Shahruz Shaukat decided to create a great 
little Mac app that lets you search, install 
and update all your plugins. It’s called 
Sketch Toolbox and it’s very simple to use 
- just search for a plugin and hit install. 


Done. If you want, you can also click on 
‘View on GitHub’ to check out the release 
notes and specific instructions. 

2 CONTENT GENERATOR 

netm.ag/contentgenerator-265 

This is the plugin that made me realise 
the true potential of plugins. Built by 
Timur Carpeev, this tool lets you generate 
random content, whether that be people’s 
names, addresses, profile pictures, 
background photos - you name it. The 
way it works is simple: create a shape (for 
images) or a text block, select it, go over 
to the plugins menu bar, run Content 
Generator, and choose from a variety of 
options for the kind of content you would 
like to see. 

This is extremely useful for populating 
designs. For example, to quickly mock-up ^ 
a friends list on an app, you could create a 
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learn Sketch 

with informal insightful videos 
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Generate ICNS Create ICN5 files quickly and simply 


Color Contrast Analyser Find out if your colour combinations meet MCAG guidelines with this plugin 


^ grid with circles and a label below, select 
them and, with this plugin, generate 
profile pictures and names in seconds. 

3 GENERATE ICNS 

netm.ag/generateicns-265 

Built by Nathan Rutzky, this plugin does 
one thing and one thing well. Sketch 
offers a pretty handsome number of 
export file formats - PNG, JPG, SVG and 
so on - but if you are designing icons you 
will probably have to create an ICNS file. 
This is basically a bundle of different 
sized images. There are some good apps 
that do this well, but with this plugin 
you won’t have to leave Sketch. 


You can either create a single 1024 
x 1024 icon, and the plugin will scale it 
down automatically, or you can create 
an artboard for each size, in which case 
the plugin will simply bundle them 
together. I recommend starting your 
project using an iOS or Mac app icon 
template (these come built-in with 
Sketch). That way you already have the 
right sized artboards. 

4 SKETCH DOCK PREVIEW 

netm.ag/dockpreview-265 

This is a great utility if you are working 
on a Mac app icon - a simple shift+cmd+D 
will preview your current artboard on 


the OS X Dock, replacing the Sketch 
gem. Useless if you are working on a 
web page or an app, invaluable if you 
are working on icons. 

5 SWATCHES 

github.com/jodyheavener/Swatches 

Swatches is a plugin that will generate 
a palette of colour swatches for you. 
That’s it, and that’s the beauty of it. 

Run the plugin from the plugins menu 
bar, and type in the HEX values of the 
colours you want to use. The plugin will 
automatically create a grid with the 
colour itself, a label, HEX and RGB values, 

6 COLOR CONTRAST ANALYSER 

netm.ag/colorcontrast-265 

Florian Schulz created this nifty utility 
that will calculate the colour contrast 
of two layers, and evaluate this against 
the Web Content Accessibility Guidelines 
(WCAG). It’s indispensable if you value 
accessibility, legibility and all-round 
good design. 

7 SKETCH DYNAMIC BUTTON 

netm.ag/dynamicbutton-265 

This was the first plugin I saw, and it 
made me realise the potential of them. 
Sketch Dynamic Button allows you to 
create buttons with a fixed padding, no 
matter how long the text is - just like 
you would with CSS. 

Here’s how it works. You create a text 
block and press . The plugin then 



Swatches Type in the HEX values of the colours you want to use and this plugin will generate a palette of swatches 
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Content generator Generate random placeholder content to populate your designs 


creates a group with your text block, 
a shape for the structure or background 
of your button, and renames the text 
block to ‘o:0:0:o’. These values are the 
padding values for your button, exactly 
like CSS’s syntax. 

So you can rename this layer to 
something like ‘10:20:10:20’ and your 
button will have lopx padding on the 
top and bottom, and 20px left and right. 

If you change the text of the text block, 

Sketch Dynamic 
Button allows you to 
create buttons with 
a fixed padding, no 
matter how long the 
text is, just like you 
would with CSS 

all you need to do it hit the keyboard 
command again, and it will automatically 
update the shape surrounding it. 

8 GENERATE GIF 

github.com/NathanRutzky/Generate-GIF 

It doesn’t matter how you pronounce it, 
GIFs have been a part of the web since 
the 90s, and despite the disbelief of a lot 
of tech-savvy people, it looks like they 
are here to stay. 

But GIFs can be more than a silent, 
animated video of a funny cat; they 


can be used to quickly and effortlessly 
prototype an animation or transition. 

This plugin eliminates the need to 
jump into After Effects or some other 
powerful tool if you want to create 
a quick prototype of an animation. 

Create the desired animation, frame 
by frame, with an artboard for each, 
naming them ‘Frame l’, ‘Frame 2’ and 
so on, and activate the plugin to create an 
animated GIF. You even have the option 
to set the time interval between frames 
or to loop the animation. 

9 SKETCHSQUARES 

github.com/abynim/SketchSquares 

Recently there was an article entitled 
‘Design Tools at Instagram’ ( netm. 
ag/tools-265 ) written by one of the 
company’s designers. In this, the 
designer shared a simple tool that 
enabled users to automatically generate 
a random Instagram photo in Photoshop. 
It didn’t take long for Aby Nimbalkar to 
port that same tool to Sketch. 

Similarly to the Content Generator 
plugin, with SketchSquares you start by 
creating a layer that you want to replace 
with a photo, and run the plugin. You can 
select from a variety of options, such as 
the source (your own feed or the ‘Popular’ 
page, for example), the preferred size, 
and even if you want to either replace 
the shape with the new bitmap photo or 
use the photo to fill the shape. This final 
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TOP TIPS 


PLUGIIM SHORTCUT 


Sometimes you find yourself using 
the same plugin over and over again. 

For example, you might want to add 
a distance between a lot of different 
elements in a project. Heading over to the 
menu bar, travelling through the menus 
and selecting the right command, again 
and again, can get old pretty fast. 

Bohemian Coding - the company 
behind Sketch - knows this, so it's 
created a built-in command that enables 
users to run the previous plugin. Just use 
the shortcut and voila. 

So, returning to the example of Sketch 
Measure, you just need to run the plugin 
once. After that, you can simply select 
two elements and use the keyboard 
shortcut above. What a time-saver. 


CREATE YOUR OWN 


If you feel inspired, and you know your 
way around code, you could try creating 
your own custom plugin. Sketch plugins 
are written in CocoaScript, which is a way 
of calling Cocoa via JavaScript. If you want 
to play around with it, click on 'Plugins' in 
the menu bar, select the option 'Custom 
Plugin...', and type in your script. 

To find out more and get started on 
your first plugin, visit the official support 
page at netm.ag/dev-265. Happy hacking! 


net april 2015 79 






FEATURES 


Secondary feature 



Sketch to App Store This superhero plugin creates and exports all the screenshots you need for the App Store 


EXCLUSIVE SKETCHCASTS OFFER 


If you would like to know more about 
Sketch, or if you've already mastered the 
tool but are curious about new plugins or 
the lesser-known details of the app, take 
a look at SketchCasts ( sketchcasts.net ). 

SketchCasts are weekly video tutorials 
covering everything you'd ever want to 
know about this great design tool. There 
are screencasts aimed at everyone from 
beginners to experts, covering topics such 
as 'Optimising performance' and 'Long 
Shadows Design'. If what you've read in 


ONE-MONTH 

SUBSCRIPTION 

sketchcasts.net/netmag 


this article has piqued 
your interest, there are 
also runthroughs of 
most of these plugins in action, using 
real-life examples. 

SketchCasts is a paid service (normally 
just $8 a month). However, exclusively 
for net magazine readers, we're offering 
one month's membership completely free 
- simply visit sketchcasts.net/netmagto 
redeem the offer (valid until May 31 2015). 
I'll see you there! 


^ option is especially handy when dealing 
with round shapes, for example. 

10 GENERATE ANDROID ASSETS 

netm.ag/androidassets-265 

If I have to be completely honest, 

I never really understood all of the 
different resolutions and pixel densities 
of Android. Gladly I never really had 
to, and it’s probably this plugin’s fault. 

Design once, activate the plugin, 
choose which pixel density you’ve used 
(usually MDPI) and this plugin will 
automatically export your work in MDPI, 
HDPI, xHDPI, xxHDPI and xxxHDPI. 
Designers rejoice! 

11 SKETCH TO APPSTORE 

github.com/clusterinc/SketchToAppStore 

This plugin got a lot of exposure when it 
came out, mostly because it’s so brilliant. 
If you design or develop for iOS, you 

To be honest, I never 
really understood all 
the different resolutions 
and pixel densities of 
Android. Gladly I never 
really had to, and it’s 
probably Generate 
Android Assets* fault 

probably are familiar with the pain of 
creating a range of screenshots for the 
App Store, especially now there are two 
new iPhone screen sizes. 

What this plugin does is take 
your screenshot, create a simple but 
completely customisable template with 
an iPhone and text on top, and export 
45 screenshot images: a set of images 
with the iPhone and text, and a set 
with just the screenshot (and an extra 
Android one), all in JPG format and ready 
to upload to iTunes Connect. Just read 
that last sentence again - I know! 

12 SKETCH NOTEBOOK 

netm.ag/notebook-265 

When it comes to presenting your designs 
to a client or co-worker, sometimes it’s 
nice to explain the thinking behind it. 
This plugin will add a tasteful sidebar 
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Sketch Divine Proportions See examples of golden spirals or golden ratio grids to help guide your design 


to the right of your document. You 
just have to select an element of the 
project, hit and type 

your comment. The plugin will add 
the appropriate number and respective 
comment in the sidebar. 

13 SKETCH MEASURE 

github.com/utom/sketch-measure 

If you work alongside other people, 
especially developers, it’s great if you 
can deliver your final mockups with 
some specs overlaid - things like 
the distance between elements, the 
dimensions of those icons, the HEX 
code of the colour you are using, or the 
font of a label for example. 

If this sounds familiar to you, Sketch 
Measure will make your life easier. 

With a couple of clicks of your mouse, 
you can automatically create overlays 
on your design that contain this kind of 
information - all in the most unobtrusive 
way possible, and easily hidden. 


14 DIVINE PROPORTIONS 

netm.ag/divineproportions-265 

Designers love grids. They love logic 
behind emotion, and divine proportions 
are just that - divine. This plugin takes 
a shape and generates, for example, an 
overlaid golden spiral 
( netm.ag/spiral-265 ), or a grid based on 
the sections created by the golden spiral, 
or it divides it by the rule of thirds. You 
name it. For me, it’s a fundamental tool 
when it comes to layout work. 

15 SEND TO SLACK 

github.com/shahruz/Send-to-Slack 

If you use Slack as a communication tool 
on your team, you are probably tired of 
exporting assets and artboards from 
Sketch, finding the files, and sending 
them through Slack. If you work in a 
medium-to-large company as a designer, 
this should sound very familiar. 

This great little utility allows you to 
share artboards to specific Slack groups, 


channels or users, directly through 
Sketch’s menu bar. Select any number 
of artboards, go to Sketch > Plugins > Send 

and choose whether you want to 
share to a group or a channel - and you 
are done! A great time saver. 

SKETCH: STREAMLINED 

One of the great things about Sketch 
is the passionate community around it. 
From blogs to tutorials to resources to 
Slack teams dedicated just to discussing 
this design tool, Sketch’s users are super- 
responsive when it comes to improving 
the app, and the community dedicated to 
building custom plugins is growing every 
single day. 

These 15 plugins allow me to push 
the functionality of this app to a whole 
new level, and they are just a small 
glimpse of what is out there and what is 
to come. Bohemian Coding is dedicated 
to expanding what the plugins can do, 
so the future is looking even brighter. □ 



Sketch Notebook Include comments for your client in a tasteful sidebar 



Sketch Measure Add overlays with useful information to your designs 
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Your website is designed and coded. 

What's the best way to get it on the server? 


Learn 7 Ways to 
Deploy Your 
Next Website 


A free video course from Mijingo. 
Just for you. 


Redemption code: NETDEPLOY 
mijingo.com/netmag 




James Steinbach shows you how to turn 
your CSS into Sass in WordPress 


Lisa Larson-Kelley compares WebRTC 
with Object RTC for real-time apps 


Lukas Ruebbelke gives an AngularJS app 
real-time capabilities using Firebase 


APP MOCKUPS WITH PIXflTE 90 CREATE ACCESSIBLE FORMS 98 PUBLISH MOBILE GAMES 108 


Jon Bell explains how to use this powerful 
tool to build a moving app prototype 


Aaron Gustafson explores how to build 
forms that work perfectly for any user 


Anton Mills shows you how you can 
publish Phaser games with CocoonJS 


DESIGN A TOUCH EXPERIENCE 94 STANDARDS 


Richard Askew shares what he learnt 
when building a touchscreen experience 


Aurelio De Rosa explains how the Page 
Visibility API can help save bandwidth 


Page Ian Pouncev exolains how ti 


Ian Pouncey explains how to make 
sure your site is keyboard-accessible 
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BROWSER SUPPORT 

We feel it's important to inform 
our readers which browsers the 
technologies covered in our tutorials 
work with. Our browser support 
info is inspired by (cpandismith's 
excellent When Can I Use web 
widget (andismith.github. io/caniuse- 
widget). It explains from which 
version of each browser the 
features discussed are supported. 



EXCLUSIVE VIDEOS 

Look out for the video icon 
throughout our tutorials. This 
issue, four authors have created 
exclusive screencasts to 
complement their articles and 
enhance your learning, including 
James Steinbach's guide to 
switching from CSS to Sass in 
WordPress, and Jon Bell's tutorial 
on prototyping with Pixate. 
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ABOUT THE AUTHOR 

JAMES STEINBACH 

w: jamessteinbach.conn/blog 

t: (cpjdsteinbach 

job: Frontend architect 

areas of expertise: 

Sass, CSS animation, 

RWD, WordPress 

q: what's the best thing 
on your desk today? 

a: A ham sandwich with 
green chile Cheddar cheese 



WordPress 


Qwordpress 


SWITCH FROM CSS TO 
SASSIN WORDPRESS 

James Steinbach shows you how to combine WordPress 
and Sass to organise your code and streamline your workflow 


H VIDEO 


James Steinbach has 
created an exclusive 
screencast to go with 
this tutorial. Watch 
along at netm.ag/ 
wordpress-265. 

You'll find the gist at 
netm.ag/gist-265 


O Every good developer knows to look for ways to 
reduce repetitious work and let their computer 
handle mundane, mindless tasks. CSS preprocessors 
like Sass give us several valuable tools to help 
automate the frontend coding process. For example, 
with Sass we can use variables. So instead of running 
a ‘find and replace’ command through a long CSS file 
to tweak a colour value, we can simply change the 
variable definition. 

Sass also allows us to write functions to generate 
blocks of repeated style code. For example, a 
button function could accept the colour or style 
as a parameter and generate all the standard CSS 
for a site’s button UI: border radius, gradients, text 


colours and so on. We can also break up our giant 
stylesheets into organised modules. Nearly every 
CMS, plugin and web app uses directories and 
partials to improve code maintainability: Sass allows 
us to do this with our CSS. 

The techniques explained in this tutorial are 
specific to Sass using the SCSS syntax ( netm.ag/ 
syntax-265), but they are applicable to most other 
preprocessors - like Less ( lesscss.org ) or Stylus 
(i learnboost.github.io/stylus ) - as well. 

CONVERTING THEME STYLESHEETS 

If the WordPress theme you’re using has Sass files 
included already, the process of converting existing 
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Theme time The Underscores WordPress theme offers an option for users to download 
a version of the theme that includes Sass partials already 


theme stylesheets to Sass is done for you. I typically 
start new themes with the Underscores template 
from Automattic (underscores.me). When creating 
a new theme package from its website, you’ll find a 
‘_sassify!’ option if you click the ‘Advanced Options’ 
link. This will provide Automattic’s default Sass 
library for you when you download the blank theme. 

If the theme you’re building or modifying 
doesn’t include Sass files, however, you’ll begin by 
converting the existing CSS file to Sass. This step 
reveals a major advantage to using Sass (SCSS): 
the Sass compiler reads plain CSS with no trouble 
at all. All you need to do to use the original style.css 
as Sass is to duplicate it and rename it style.scss . 

SETTING UP SASS PARTIALS 

Earlier I mentioned that Sass improves our workflow 
by letting us break thousands of lines of CSS into 
modular files called partials. Let’s work through 
this step before getting to compiler methods. 

If you’ve converted an existing CSS file to Sass, all 
you’ve got so far is a .scss file that’s just as unwieldy 
as the CSS file it came from. At this point, you can 
start using variables and writing mixins or functions, 
but the Sass isn’t modular or organised yet. You 
want to group your CSS file into sections that serve 
individual purposes. The goal is to be able to work 
out where code is found based on its file name. 

Some modules of code that you’ll probably 
want to isolate include navigation, typographic 
styles, sidebar widgets, footer and a grid system 
(although that list is not comprehensive by any 
means, it’s just a starting point). 

You will then cut and paste each modular section 
of CSS into its own Sass partial. A Sass partial’s 
file name always starts with an underscore ( _ ). ► 


* FOCUS ON 


COMPILING SftSS 
WITH COMPASS 


Compass (compass-style.org) makes Sass configuration simple 


by storing output configuration in the 


config.rb 


file: 


# Set this to the root of your project when deployed: 
http_ path = 7" 

css_dir = 
sass dir = "" 


images_dir = "../images" 


javascripts_dir = "../js" 


# You can select your preferred output style here (can be 
overridden via the command line): 

# output_style = expanded or :nested or compact or compressed 


output_style = expanded 


# To disable debugging comments that display the original location 
of your selectors. Uncomment: 


# line comments = false 


I keep in my folder. In this file, the first five options 

are file path and directory values. The first option 

is the project's path on the server. Next, specifies the 

directory where compiled CSS files should be saved. In this 

case, it's up one level from in The 

option points to the directory where Sass files are found (same 

as here). 

The and values specify where 

images and JS files are kept in this project. The 
option controls how the compiler generates CSS. I toggle between 
for development and for production. 

Once we save all the project options in all we need to do 

is navigate to the folder that contains that file and run Q 

in Terminal or Command Line. Compass uses all the options 
in the config file and runs Sass to compile our files properly. 


Install Help & Documentation Code Reference Blog Contribute 


compass 


is an open-source CSS Authoring 
Framework. 


Mastering Compass Using Compass with a config.rb makes it easy to store Sass 
configuration options and share them with other developers 
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► This tells compilers not to create a unique CSS file 
based on this Sass file. 

A compiler app that watches a folder full of Sass 
and automatically generates CSS will create style.css 
based on style.scss , but it won’t create navigation.css 
based on navigation.scss . To compile all the partials 
you’ve just created, you’ll (cQimport them in your 
main Sass file. 

Each time you copy a block of code to a partial, 
replace it in the primary .scss file with (cQimport 
'partial-name'; . If you move your footer styles to 
_footer.scss , add (cQimport 'footer'; . Don’t include 
the _ or the .scss in the import: just the name 
of the file. 

If you want to get really organised and break 
header navigation and footer navigation into two 
separate partials in a /navigation/ folder, include the 
folder name in the import: 

(cQimport ‘navigation/header-nav 1 ; // imports /navigation/, 
header-nav.scss 

(cQimport ‘navigation/footer-nav 1 ; // imports /navigation/, 
footer-nav.scss 


It’s important to remember that the CSS cascade 
still applies to code written in Sass. Styles written 
in partials imported later have the ability to override 
styles in partials imported earlier. 

It’s also wise to import partials that contain 
your mixins and variables at the beginning of your 
primary Sass file, so that later partials can actually 
use those variables and mixins. 


Superstar Sass is the 
most mature, stable and 
powerful professional- 
grade CSS extension 
language 


WORDPRESS COMMENTS 

According to WordPress style.css requirements, 
we need to make sure our compiler preserves the 
WordPress comments at the top of style.css. When 
Sass’ output_style is set to compressed , it strips all 
comments when it compiles CSS. 



INSTALL LEARN SASS BLOG DOCUMENTATION GET INVOLVED LIBS 


CSS with superpowers 



Sass is the most mature, stable, anc 
powerful professional grade CSS 
extension language in the world. 


Current Release: Selective Steve (3.4.9) Release Notes Fork on Github 


To ensure that those comments are left intact, 
add an exclamation mark (!) to the beginning of 
the comment block in style.scss : 

/*! 

Theme Name: Sassy WordPress Theme 
Theme URI: http://jamessteinbach.com/sass/ 

Author: James Steinbach 

Author URI: http://jamessteinbach.com 

Description: From CSS to Sass Sample Theme Code 

7 

// Import all your .scss partials below 


REFACTOR CSS TO SASS 

Now that we’ve broken a long stylesheet into smaller 
modular partials, we can start to refactor the original 
CSS to fit our Sass preferences. Some helpful Sass 
tools for refactoring code are variables, nesting, 
functions and mixins. 

Now we’ve broken up 

the stylesheet, we can 

refactor the CSS to fit 

our Sass preferences 

If you want to change some colours or set up a 
standard type scale, variables are the best way to 
save all that data in a single place and make site¬ 
wide changes easily. If you haven’t already created 
a partial called _variables.scss , I recommend doing 
that now - and importing it at the top of your main 
Sass file. Here are some variables you may want to 
put in that partial: 

$red:#FFA136; 

$blue:#007AD9; 

$blue-dark:#001F3F; 

Jorange: #FF851B 
$type-small: 12px; 

$type-medium: 16px; 

$type-large: 21px; 

$type-hero: AApx; 


Once you’ve set up those variables, you can search 
your partials and replace values with variable names: 

body { 

color: $blue-dark; 

} 

.page-title { 
font-size: $type-large; 

} 
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You can use a Sass feature called ‘nesting’ to help 

make complex selectors more readable. Your starting 

CSS may include styles for multiple elements in 

the site sidebar: 

.sidebar hi { 

//styles 

r 

.sidebar p { 

//styles 

r 

.sidebar ul { 

//styles 

r 


You can nest styles inside of other style blocks 
and Sass will combine selectors to create the 
complex selectors. The code below will compile 
to the same output as the original CSS (as shown 
in the code above). 

.sidebar { 
hi { 

//styles 

7 ~ 

p{ 

//styles 

} 

uK 

//styles 

} 

} 


In nesting & can be used as a placeholder for the 
entire string of selectors above it. As nesting puts 
a space between selectors, it can be helpful when 
using pseudo-classes and pseudo-elements: 

aT_ 

color: $blue; 

&:hover{ 
color: $blue-dark; 

} 

)_ 

.clearfix { 

&::before, 

&::after { 
content: 
display: table; 
clear: both; 

} 

} 


The & can also be used to duplicate or reverse the 
order of selectors: 


p{ 

&+&{ 


S VIDEO 


margin-top: lem; 

} 

} 

.menu-link { 
color: $gray; 
.menu-item:hover & { 
color: $gray-light; 

} 

} 


Micah Godbolt's 
'Get Your Sass in Line' 
presentation covers 
how to share Sass files 
in an organised way 
netm. ag/godbolt-265 


You may be wondering if it’s worth your time to 
refactor by nesting properties. While nesting may 
increase readability (although this is subjective), 
it’s also a tool to be used carefully. Most Sass experts 
recommend an ‘Inception rule’ for Sass nesting: 
never nest more than three levels deep. It’s wise to 
use Sass nesting sparingly. If it doesn’t make sense 
in your workflow, don’t force it. 

If you’re repeatedly calculating certain properties 
in your CSS, you can replace that process with a 
Sass function. A function takes the parameters you 
give it and returns a value. It won’t generate CSS 
property-value pairs, but it can generate values 
for you. 

Here’s an example of a function to calculate faded 
colours on hover: 

// This goes in _functions.scss: 

(©function hover-color($color) { 

(©return lighten($color, 10%); 

} 

// This is how you use the function in other partials: 

.button { 

background-color: $red; 

&:hover{ 

background-color: hover-color($red); 

} 

} 


We can also refactor our code by taking repeated 
blocks of code and replacing them with mixins. 
A great example of a useful mixin is a clearfix. 

// This goes in _mixins.scss: 

(©mixin clearfix() { 

&::after { 
content: 
display: table; 
clear: both; 

} 

} 

// This is how you use the mixin in other partials: 
.content-container! 
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* RESOURCES 


FURTHER READING 

I j Here's a run-down of some good places to look if you want 
to explore further. The first several articles are specific 
to WordPress developers getting started with Sass. The rest of 
the links offer broader insight into good Sass organisation and 
maintenance processes. 

'Sass for WordPress developers' by James Steinbach ( netm.ag./ 
steinboch-265 ) - This article introduces WordPress developer to 
Sass and recommends some useful tools 

'Compass compiling and WordPress themes' by Chris Coyier 

(netm.og/coyier-265) - Discusses methods for using Sass to 
generate a WordPress-compliant stylesheet 

'How to use Sass with WordPress' by Andy Leverenz 

(netm.ag/leverenz-265) - Walks users through how to set up 
a local WordPress installation, install Sass and Compass, 
and start compiling Sass 

'Introduction to Sass for new WordPress theme designers' by 
WPBeginner (netm.ag/WPBeginner-265) - Shows how to use the 
Koala app to compile Sass in a WordPress theme 

'A WordPress development process using Sass and Compass' by 
Yanko Dimitrov ( netm.ag/dimitrov-265) - How to set up folders and 
file for Compass-compiled Sass 

'Architecture for a Sass project' by Hugo Giraudel ( netm.ag/ 
giraudel-265) - Some great ways to organise files in a Sass project 

'Sass partials and the problems surrounding them' by Tim Whitney 

[netm.ag/whitney-265) - Tim explains the need to organise Sass 
files well 

'How Evernote handles their Sass architecture' by Ryan Burgess 

[netm.ag/burgess-265) - How a large company like Evernote 
manages its Sass structure 


(©include clearfix; 


Mixins can also take parameters to generate 
customised output. This is very useful for design 
patterns like buttons or alerts: 

// This goes in _mixins.scss: 

(©mixin alert($color) { 
border-radius: .5em; 
box-shadow: 0 0 .25em 0 rgba(0,0,0,.5); 
border-top: Apx solid Jcolor; 
color: $color; 

} 

// This is how you use this mixin: 

.alert-error { 

(©include alert($red); 

} 

.alert-success { 

(©include alert($green); 

} 


One common piece of advice that you may see 
online is to use mixins for cross-browser prefixing. 
I usually recommend against this, however. I find 
that Autoprefixer ( netm.ag/prefix-26s ) is a much 
better way to automate prefixes. 

If you’re unable to run Autoprefixer, and have 

▼ Q forms 

-buttons, scss 
-fields.scss 
-forms, scss 

▼ £2 layout 

_conte nt - s i de ba r, scss 
_sidebar-content,scss 

▼ □ med ia 

jiaptions.scss 
V .galleries, scss 
_media.scss 

▼ Q mixins 

_mixins-master,scss 

▼ £2} modules 

.accessibility^ css 
.alignments.scss 
.clearings.scss 
> Jnfinite-scroii.scss 

▼ Cl navigation 

r Jinks,scss 
_menus.scss 
y -navigation,scss 

▼ C“ site 

-Site.scss 

► primary 

► Pi secondary_ 


P style.scss 


▼ Q typography 

_copy. scss 
V -headings.scss 
-typography, scss 

▼ d: variables-site 

Sorted partials The underscores.me theme sorts partials into 
folders including 'elements', 'forms', 'layout' and 'media' 
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WordPress 


VARIABLES 

Variables allow you 
to easily organize 
and update values 
repeated globally in 
a project. 


NESTING 

Nesting allows you 
to organize Sass 
visually and generate 
complex selectors 
dynamically. 


FUNCTIONS 

Functions allow you 
to calculate values 
based on global 
variables and passed 
variables. 


MIXINS 

Mixins allow you to 
create blocks of 
styles that can be 
modified by passed 
variables. 


Organising your CSS With Sass, developers can use tools like variables, nesting, functions and mixins to organise and automate their CSS 


S VIDEO 


In this 'Getting Sassy 
with WordPress' 
presentation at 
WordCamp NYC, 

Tracy Rotton explains 
how Sass helps WP 
developers and gives 
an overview of some of 
Sass' powerful features 
netm.ag/rotton-265 


to rely on Sass mixins, Compass’ mixin library 
( netm.ag/support-265 ) allows user configuration and 
stays up-to-date with CanlUse data ( caniuse.com ). 

ORGANISE YOUR PARTIALS 

To recap, we’ve taken the theme’s existing stylesheet 
apart and refactored some code to make things 
cleaner and Sassier. Now we can organise our partials 
to improve maintainability in the long run. 

Remember that the cascade still matters. Sass- 
compiled CSS is just like plain CSS in that styles that 
appear later in the stylesheet can override styles that 
appear earlier. As a rule, import your general styles 
before you import specific styles. 

Remember that the 

cascade still matters. 

Import your general 
styles before you import 

specific styles 

Similar partials can be organised in folders. 

There are two ways to import Sass partials from 
directories. The first is to import each file into 
style.scss including the folder name in the import 
directive, like this: 

(cpimport 'base/variables'; 

// imports _variables.scss from the /base/ directory 
(cpimport ‘base/mixins 1 ; 

// imports mixins.scss from the /base/ directory 
(cpimport 'base/grid'; 

// imports grid.scss from the /base/ directory 


The second (and admittedly more complicated) 
method is to create a placeholder partial in 
each directory that imports the other partials 
in that directory (next column): 


// in style.scss 
(cpimport 'base/base 1 ; 


// in /base/_base.scss 
(cpimport 'variables'; 

// imports _variables.scss from the /base/ directory 
(cpimport 'mixins'; 

// imports mixins.scss from the /base/ directory 
(cpimport 'grid'; 

// imports grid.scss from the /base/ directory 


Both of these methods import the same partials in 
the same order. The first method is simpler on the 
surface, but the second method has the advantage of 
keeping style.scss neat and moving any complexity 
into the modules it relies on. 

There are almost as many ways to organise Sass 
partials as there are developers trying to organise 
Sass partials. You’ll find several good options in the 
‘Resources’ boxout on page 88. 

Here’s one fairly simple organisation scheme you 
could use: 

• /base/ (variables, mixins, reset, typography) 

• /layout/ (grid, header, footer) 

• /vendors/ (plugins, vendors, etc) 

• /components/ (buttons, menus, forms, widgets) 

• /pages/ (home, landing page, portfolio) 

SUMMING UP 

This article only begins to explore the potential 
of using Sass in WordPress theme development. 
Chances are strong that you’re eager for more 
information now, especially if this is the first thing 
you’ve read on the subject. 

Check out the ‘Resources’ boxout for more reading 
around the subject - these articles include several 
variations on a Sass-WordPress workflow. Some of 
their advice differs from what I’ve recommended 
(especially on the topic of organising partials), but 
that’s fine - find the techniques and workflows that 
work for you! □ 
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q: what's the best thing on 
your desk today? 

a: Sharpie markings from 
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files here! gS 


Download the assets you 
need for this tutorial at 
netm. ag/pixatepics-265 





^prototyping 

BUILD A MOVING APP 
MOCKUP WITH PIXATE 


Pixate makes prototyping iOS and Android apps a breeze. Jon Bell 
explains how to use this powerful new tool to build a simple app 


H VIDEO 


Jon Bell has created an 
exclusive screencast 
to go with this tutorial. 
Watch along at 
netm. ag/pixate wid-264 


© Designers will tell you that design isn’t just how 
something looks, it’s how it works and how it 
feels. Nowhere is this more evident than in the world 
of app design. Working in Sketch or Photoshop 
results in nice visuals, but these tools don’t do 
a great job of explaining how the app will feel. 

Is the scrolling buttery smooth? When tapped, 
do images ‘pop’ into fullscreen mode in a pleasing 
way? These are the types of interactions that Pixate 
is great at demonstrating. 

In this tutorial we’ll make a complete prototype 
that uses native code, right on your iOS or Android 
device, without having to learn a new language or 
a new framework. All you’ll have to do is import 


some images, add some interactions, and pick your 
animations from Pixate’s helpful and well-designed 
web app. 

Before we get started, download the assets from 
netm.ag/pixatepics-265. The package contains the 
five images we’ll need to build a simple emoji-based 
communication app. 

Today Pixate is going to help us understand 
how to deal with image attachments in our emoji 
app. Should attachments appear in a separate 
window? How should the animation look? Should we 
add a fullscreen mode? Of all the prototyping tools 
I’ve used, Pixate is the best at answering questions 
like these. You’re in for a treat! 
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Step 1 Kick things off by signing up for a free 30-day Pixate trial account 



First of all, go to pixate.com 
and sign up for an account. 
The team has just introduced a free 
version, so you can experiment as 
much as you like! 

Start a new project and 
■■■ name it'Learning Pixate'. 
Then open a new prototype and 
select 'iPhone 5' as your screen 
size. Name it 'Netmag Article' and 
pat yourself on the back. You're 
crushing this. You'll be done in 
no time. 


Next you'll see the main 
Pixate interface. Take a look 
around and get comfortable; this 
is where we'll be spending all our 
time. One great thing about Pixate 
is that it packs a lot of power into 
a pretty straightforward interface. 


The first thing we need to do is 
upload the image assets that you 
downloaded earlier from netm.ag/ 
pixatepics-265. 

Drag and drop them onto the 
Pixate website to upload them into 
your project. It'll take a moment for 
them to successfully upload and 
appear in your assets tab. 


These images aren't on the 
canvas yet, so let's take 
care of that next. You'll see each 
of your assets in the bottom-left 
screen. Click and drag 'messagelist. 
png' until it snaps to the top of 
the canvas, 'messagedetail.png' 
should sit directly to the right of 
'massagelist.png', although this 
image isn't as tall. 

Place 'statusbar.png' at the top 
of the first screen, and 'titlebar.png' 



Step 3 Take a moment to upload the image assets provided 


and 'rabbitAndWaffle.png' on the 
second screen. 


At the top-left of Pixate's 
app in Chrome, you'll find 
a plus sign. Click it and you'll see 
a new shape added to the Layers 
area. A grey square box will appear 
- double-click and name it 
'screenl'. Modify the properties 
area at the right, so the box is set 
to left: 0 , top: 0 , width: 320 , 
height: 568 . Add a second object, 
name it 'screen2', and change the 
properties to left: 320, top:0, 
width: 320, height: 568 . 


05 


At this point, you'll just see 
a boring wall of grey. We're 
going fix that. First change the 
colour to white by finding the 
appearance drop-down. Click 
it and pick 'white' from the simple 
colour picker that appears. 


We're going to nest items 
together in the layers 
area on the left. Click and drag 
'messagelist.png' on top of 
'screenl' and you'll see them group 
together. Do the same with 
'screen2' by dragging 'titlebar.png', 
'messagedetail.png' and 
'rabbitAndWaffle.png' onto it. 
'statusbar.png' lives on both 
screens, so make it the first item 
in your list, not nested in 'screenl' 
or 'screen2'. Take your time with 
this - layer order matters! 


Qxpert tip 

FIND YOUR 
WAY AROUND 


There are only a few 
regions in the Pixate 
interface, which makes 
it really easy to get 
started. Layers act just 
as they would in tools like 
Photoshop - items higher 
up in the list are stacked 
higher up on the canvas. 
Actions handle things like 
taps and swipes. Assets 
are where your images 
live. And properties, the 
place where you fine- 
tune everything, takes 
up the entire right-hand 
region of the screen. 
That’s it! 


► 
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PROJECTS 


Next we'll see how the 

app is looking on a device. 
Download Pixate for iOS or 
Android, and once you log in 
you'll see your projects and this 
prototype. It's currently pretty 
boring, but that won't last long. 
Keep your smartphone out while 
you use Pixate, because every 
change you make will magically 
update on your device. 

We're going to liven things 
I up by making the list 
respond to a scroll gesture. In the 
Actions area, find the scroll item 
and drag it onto 'screenl' in your 
layers list. After a few moments, 
it'll automatically update on your 
phone and it will scroll like a real 
app. If you're like me, you'll dance 
a happy jig when you reach this 
point. This is a big deal! Savour it. 
Proceed when you're mentally 
ready to be even more awesome. 


Now we're going to tie the 
two screens together. Click 
the 'plus' sign to get a new shape, 
name it 'hotspot' and resize it into 
position over the part of the image 
that says (tap to view image). It's 
grey by default, but you can make 
it transparent (in the colour picker 



Step 8 Download the Pixate mobile app to your phone to see your updates live on a device 


this is represented as a white 
background with a red diagonal 
line through it). 

In the layers list, drag the new 
shape into the 'screenl' grouping. 
This will soon be our key tappable 
area in this prototype. It doesn't do 
anything yet, but we'll fix that in the 
next step. Allow me to introduce 
you to Pixate's actions... 


In the Actions area on the 
■ ■ leftside of the screen, drag 
the tap action onto the'hotspot' 
shape in your layers list. Now we've 
registered that your hotspot can 
accept taps. That's a good start, 
but we still need to define what we 


want to happen on tap. Say hello 
to Pixate's animations. 


Drag the move animation 
onto the 'screen2' grouping 
in the layers list. On the right-hand 
side, under properties, you'll see 
a move section with some 
parameters. There's a section 
that says Based on with two 
drop-downs. Change them to say 
'hotspot' and 'tap' and presto, 
screen two can now respond 
when the hotspot is tapped. 


Define the response by 
setting left: to'0'under the 
Move To section. Try it out on your 


device - you should see a screen 
animating in from the right. 
Triple-tap your prototype to reset 
it back to the first screen. 


Now let's wire up a way to 
link back to the original page 
so we don't have to triple-tap every 
time we want to go back. Let's 
make the '< Back' item tappable 
by adding a hotspot to it. You know 
howto do this: drag the tap action 
onto the titlebar layer to make it 
tappable, just like before. 


Drag and drop move onto 
'screen2'. Now you have two 
different move actions, so scroll 



Step 19 We want the rabbit image to double in size when tapped 


ESxpert tip 

MIX IT UP 


Pixate’s interface encourages experimentation, so play 
around with all the options in the properties area to see 
what happens. For example, using a Efflfig easing curve 
makes your app feel completely different to if you use 
|UlI£y. Then factor in friction, tension, and different 
kinds of delays and conditions and you can emulate a 
wide array of different animations. Give them a shot! 
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Interactions 


o- O © 

Drag Tap Double' 

® 0 ^ 


Long Press Rotate 


Step 20 Type'2x'under scale , and set the easing curve to spring 


down to find the new one we just 
added.Change the Based on: 
drop-downs to 'titlebar' and 'tap'. 
Then change the left property 
to '320'. Try this on your device, 
and you should be able to make 
'screen2' animate on and off. 


Now 'screen2' is doing its 
job, but we need to make 
sure 'screenl' is moving too. After 
all, we want the two images to 
move in concert, like a single pane 
of glass. Right now one screen is 
covering the other. 


Drag a move onto'screenl'. 

Change the based on 
drop-downs to 'hotspot' and 'tap'. 
Set the left property to'-320'so 
it'll move smoothly off-screen 
when 'screen2' pushes into view. 
Drag another move on'screenl'. 
This time base it on titlebar and 
tap. Set the left to'0'and throw 
yourself a parade. Or a party. At 
very least pour yourself a beverage. 
If all has gone well, your prototype 
will be able to nimbly navigate 
between two screens, and that's 
cause for celebration. 


Ready to do one last thing? 

It's a great way to explore 
some fun animations while I show 
you about Pixate's condition logic. 
Let's improve our prototype by 
making the rabbit image go 
fullscreen when we tap it. This 
animation should be a toggle, 
so when you tap the rabbit again, 
it returns to its original size. To kick 
this step off, drag three things onto 
'rabbitAndWaffle.png': a move 
animation, a scale animation and 
a tap action. 


In based on: dropdowns, 
for both move and scale, 
select 'rabbitAndWaffle.png' and 
tap . Notice that both move and 
scale have a CONDITION section 
with a text field. Type 'rabbitand 
wafflepng.scale == 1' into both 
fields. Above, in the Properties 
section, make sure left is set to 
'9' and top is set to '95'. 


the easing curve to spring. Next 
click the blue +C0NDITI0N linkand 
under Scale: type'lx'and again 
set the easing curve to spring. 


Finally, let's change the 
positioning. Under move 
look for a pair of drop-downs in the 
Move to: section. Change the first 
drop-down to horizontal center 
and type '160' in the field. Change 
the next drop-down to vertical 
center and type '28A'. Change the 
easing curve to spring. 


■ | Click the blue +CONDITION 
link and in the Move to: 
section set left to '9' and the top 
to '95'. Once again, use the fun 
spring easing style. Then try it 
out on a device. When you tap the 
rabbit it should get twice as large 
and move itself into the centre of 
the screen. Tapping again should 
put it back into place. 


Qxpert tip 

EDUCATE 

YOURSELF 


This tutorial has been 
designed to introduce 
you to a broad range 
of techniques, but if 
you want to learn more 
about anything Pixate 
can do, check out its 
great education section 
at pixate.com/education. 
There you can find video 
walkthroughs of all the 
core techniques, as well as 
demos of the interactions 
found in apps like Tinder 
and Secret. Be sure to 
check it out after you’ve 
got your feet wet! 


Scaling will be nice and 
straightforward - we just 
want the image to become twice 
as large. Look for the scale: 
drop-down and type '2x'. Then set 


20 


And that's your prototype! 
Now that you know how 
Pixate handles actions and 
animations, you can recreate any 
interaction in any app. Have fun! □ 
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□TOUCH 


DESIGN AN INTERACTIVE 
TOUCH EXPERIENCE 


On a recent project, Richard Askew built a touchscreen experience 
that moved away from traditional web principles. Here’s what he learnt 


Ik) RESOURCE 


Global Moxie's Josh 
Clark regularly talks 
about designing 
for touch, in both 
a practical and 
theoretical way. His 
talks are recommended 
viewing for all web 
developers 
netm.ag/clark-265 


O Recently, my company - Askew Brook - and 
another local design company won a contract 
to work on an interactive touchscreen installation. 
Although it wasn’t something we’d had a lot of 
experience of, I was keen to take the project on as it 
used my web development skills to solve a different 
kind of problem, in a different environment to 
what I was used to. 

First of all a bit of background: our client was 
a theatre in Leeds that had a very strong and rich 
history of attracting the leading acts of their time 
to the theatre. We decided to create a variety show 
experience that could be built by the user, who in 
doing so would unlock the theatre’s history. You 
can take a look at the final installation in action 
at netm.ag/demo-265. 

The build was different from a traditional 
website project in a number of ways: 


• It wouldn’t be available outside of the theatre 

• The kiosk had a fixed screen resolution 

• The kiosk could be moved, so an internet 
connection may not always be available 

Was it possible to still build this thing as we would 
a website? Here’s a few things we learnt about 
designing for touch ... 

1 CONSIDER THE PLACEMENT AND 
SIZE OF CONTACT POINTS 

As anyone who has designed and subsequently 
viewed their website on a mobile device knows, the 
placement and size of contact points is important. 
And - contrary to what you might expect - bigger 
isn’t always best. 

After the first round of testing we made each 
contact point bigger. We included controls that 


94 net april 2015 













managed the overall experience and gave the user 
the ability to start, clear or even end the show. These 
were placed around the edge of the screen and made 
large enough to easily identify and touch - not only 
making the installation simpler to use and helping 
the user feel like they knew what they were doing. 

The interesting part was at a lower level. There are 
a number of interactions the user needs to complete 
in order to build the acts, click through timelines 
and so on. We found that the contact points for 
these functions could remain smaller as long as any 
other actions the user needed to take were close by. 
Making them large and moving them away from that 
specific area made everything more difficult. That’s 
Fitts’ Law (netm.ag/fitts-265) in practice! 

2 MANAGE EXPECTATIONS 

These days, when someone says ‘touchscreen’, you 
automatically picture a tablet or a smartphone. We 
weren’t dealing with those types of touchscreens in 
this project, but - crucially - people were expecting 
our creation to react in the same way. Tablets 
and smartphones are so ingrained in our thought 
process, and feel so natural, we automatically apply 
those mental models to every touchscreen device 
we interact with. 

Crucially, people were 

expecting our creation 

to react in the same 

wav as a smartphone 

There are plenty of JavaScript libraries that provide 
these types of functionality, but we found they were 
never quite as good as the real thing. So we didn’t 
give the user an infuriating experience, we decided 
to just use what was available with the hardware: 
they could tap. That was it - no swipe or pinch and 
zoom. We made sure that contact points looked like 
buttons and highlighted them when we needed an 
action from the user. 

3 KEEP THINGS PRACTICAL 

Our final solution relied heavily on animations, 
in a Monty Python style, of the variety performers. 
One of the reasons I really wanted to take the job 
on in the first instance was the opportunity to work 
with complicated CSS3 animation in an environment 
that we could 100 per cent control. As time went on 
though, a much simpler and more obvious solution 
presented itself - a good old GIF. It isn’t as sexy, but 
from a practical point of view it was a great help. 


The decision to use GIFs suddenly meant that 
each member of the team, be they design or 
development, could create and manipulate the 
animations quickly, dramatically speeding up the 
project. It also helped when creating prototypes, 
as we could complete the most visually interesting 
parts first, and use these to help communicate our 
final vision to the client. 

U MAKE IT PUBLIC-PROOF 

We still needed to load resources, but the fact that 
the touchscreen unit could move meant that we 
couldn’t rely on an internet connection. If you’re in 
a similar situation, make sure you don’t rely on any 
online service - load all JavaScript, font libraries and 
whatever else you need locally. This is an obvious 
one, but one I profess caught me out and caused 
unnecessary panic on the morning of delivery! 

At this point we had completed the build, but our 
solution was effectively still a browser on a PC - we 
had to make it public-proof. There are a number of 
options available for Kiosk software, but we decided 
to look to other alternatives. 

We essentially needed the following: 

• A local website to open when the touchscreen 
unit is turned on 

• A fullscreen web page 

• To stop users from accessing the system or the 
address bar to visit unsavoury websites 

We found we could create a batch file that would 
start Apache and launch Google Chrome in Kiosk and 
incognito mode on startup. It meant we could keep 
costs down and that there wasn’t another layer of 
complexity for the client’s IT team. 

5 USE DESKTOP SHARING SERVICES 
FOR REMOTE TROUBLESHOOTING 

We needed a way to access the touchscreen remotely 
so we could troubleshoot and fix bugs during the 
testing period. Obvio usly, we need the touchscreen 
to be networked to achieve this, and there are a 
number of options available. We opted for Chrome 
Remote Desktop to keep things contained, but any 
desktop sharing service would work. 

REFLECTIONS 

There are always things that could be improved 
upon, but the biggest lesson we learned from this 
project was to embrace the unknown. We don’t take 
on projects if we aren’t convinced we can deliver. 
Although we hadn’t done this before, we utilised 
what we knew and pushed it to new areas - there 
is always a first time for everything. □ 
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FACT FILE 

GET STARTED 

SimpleWebRTC, 
EasyRTC and Peer, 
js libraries; service 
providers like PubNub 
and Xirsys; and services 
such as Talky.io and 
Appear.in offer easy 
starting points. 

REQUIREMENTS 

Development requires 
a standard text editor, 
a WebRTC-compatible 
browser, a tool such as 
Chrome Dev Tools with 
webrtc-internals to 
debug, and a webcam 
and microphone for 
testing. 



EShead to head 

WEBRTC VS ORTC 

Lisa Larson-Kelley compares standard WebRTC to 
using the Object RTC API for real-time apps 


WEBRTC 

ORTC 

WebRTC is a free, open project that provides 
browsers, mobile apps and loT devices with real-time 
communications (RTC) capabilities (video, voice, and 
data) via simple APIs. The initiative is supported by 
Google, Mozilla and Opera, among others. 

Object RTC (ORTC) is a JS API that makes it easier for 
devs to manage connections and manipulate media 
streams in WebRTC. It is planned as an additional 
'shim' layer to WebRTC. Initiated by Hookflash, it's 
now supported by Google, Microsoft and others. 

CAPABILITIES 

WebRTC enables browser-to-browser communication 

without plugins, which allows developers to embed 
real-time video, audio and data sharing capabilities 
into web pages and mobile applications. The data 
shared over this peer-to-peer connection is encrypted 
by default. 

ORTC will be able to do everything WebRTC does, 
while exposing additional control over media streams 
and eliminating the reliance on the complex SDP 
handshake. It also provides enhancements such 
as control of senders and receivers, as well as 
communications transport elements. 

EASE OF USE FOR IaIEB DEVELOPERS 

While you can create WebRTC apps using JavaScript 
code, the easiest way is to use a prebuilt framework. 

The typical web developer isn't going to want to deal 
with the many complexities involved in establishing 
peer connections and exchanging data - a framework 
will do much of the heavy lifting for you. 

ORTC is object-oriented, making it much more 
accessible for devs. The ORTC specification enables 
support for advanced video conferencing technologies 
that otherwise wouldn't be available via WebRTC, such 
as scalable video coding (SVC) and simulcast. This will 
allow you to more easily create Hangouts-like apps. 

INTEROPERABILITY WITH LEGACY SYSTEMS 

WebRTC requires SDP - a format used in older 
communications methods, compatible with 
telecommunications/VolP applications. Sadly, it's 

not ideal for real-time communication environments 

where there can be a variety of scenarios. 

ORTC provides an object-oriented approach to initiate 

connections. The API works with functions and events 

and provides JavaScript Objects as arguments, rather 
than the clunky SDP offer/answer approach. SDP can 
still be used with ORTC, but it's not required. 

BROWSER SUPPORT 

WebRTC's three APIs - MediaStream (getUserMedia), 

RTCDataChannel and RTCPeerConnection - are built 

into Chrome, Firefox and Opera on desktop and mobile. 

The ORTC shim is still being built - but the specs 
require that it be compatible with 'modern browsers', 
and be interoperable between browsers. 

VERDICT 

ORTC provides raw control for those who need it, while still enabling the current WebRTC 

API. The ORTC API is still very much under development, however, so it's not ready for use 
in production just yet. Community involvement through experiments and prototyping is 
encouraged, and needed. So, bottom line - WebRTC for today, ORTC for tomorrow. 
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q: what's the best thing 
on your desk today? 

a: My vinyl Funko Pop 
figurine of Michonne from 
The Walking Dead 


g H TML FORMS 

CREATE SIMPLE, 
ACCESSIBLE FORMS 

Follow Aaron Gustafson as he explores web standards solutions 
that will help you create forms that work perfectly for any user 


O HTML forms are probably among the most 
complex interfaces a frontend web designer 
has to create. They involve a bunch of different 
elements, labels, messaging, validation and errors 
- it’s a lot to wrap your head around. From a user 
experience perspective, they are similarly 
challenging: a poorly designed form can be 
incredibly frustrating to complete. And some are 
so poorly thought-out that they actually prohibit 
you from being able to use them at all. 

It doesn’t have to be this way. Web standards 
provide numerous mechanisms for creating 
incredibly usable forms simply by being smart about 
how we write our HTML. Additionally, as HTML is 
made to be both backward- and forward-compatible, 
using these tools correctly aligns our efforts with 
the philosophies of progressive enhancement and 
universal design (netm.ag/universal- 265). 


0 VIDEO 


Aaron Gustafson has 
created an exclusive 
screencastto go with 
this tutorial. Watch at 
netm.og/forms-265 


START WITH CLEAR PROSE 

The number one problem most people have with 
forms is poor messaging. Instructions aren’t clear. 
Form labels are vague. There is no indication of 
what is required. These all present challenges to 
your users. So when you start thinking about a form, 
think about how it reads. 

Start with an introduction. What does a user need 
to know about this form to get started? Are all of 
the fields required? How long might it take to fill 
out? Will they need to consult any supplementary 
documents, like their driving license, passport or 
a utility bill? 

Put yourself in your users’ shoes and ask yourself 
what is crucial to know at the outset, then author 


your content accordingly. Don’t be pedantic or 
patronising. Get to the point and get out of the way. 
There are plenty of statistics that show a majority of 
users don’t read instructions because they’re long 
and unfocused. Keeping it brief can increase the 
likelihood that content will be read. 

Of course, given that most users don’t read 
instructions, it is doubly important that the labels 
you use, supplementary instructions you provide, 
and overall form organisation be as clear and concise 
as possible. For example, ‘Your Name’ is a little more 
explicit (and human-sounding) than simply ‘Name’. 
If you want to strike a more conversational tone, you 
could even ask ‘What’s your name?’ 

The same goes for explanatory text. Keep it clear 
and concise. On Web Standards Sherpa’s contact 
form ( webstandardssherpa.com/contact), its email 
field is joined by text about how the information 
will be used: “We will only use your email address 
to respond to your message.” Super helpful (and 
reassuring) stuff! Text is the foundation of every 
great user experience on the web. Start there. 

ALWAYS USE A LABEL 

Labels serve a critical purpose in web forms: they 
tell someone what you are expecting from them. 

As I mentioned, the text you use to label a given 
form control is incredibly important. But once you 
have that clear label, it’s equally important that you 
associate it properly with the form control. That’s 
where the label element comes in. 

The label element can be associated with a form 
control in one of two ways: implicitly and explicitly. 
Implicit association involves wrapping the label 
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ALL FIELDS ARE REQUIRED 

Your Name 


Your Email 


We will only use your email address to respond to your message. 

Helpful info Web Standards Sherpa's contact form includes crystal clear 
advisory information about how your email address will be used 

element around the form control. I like to use that 
approach with radio and checkbox controls: 

<labelxinput type="radio" name="confirm" value="yes"> 
Yes</label> 


Here the label "Yes" is associated with the radio 
button implicitly. Explicit association involves using 
the for attribute, which is an id reference to the 
corresponding form control: 

<label for="name ,, >Your Name</label> 

<input id="name" ...> 

Text is the foundation 

of every great user 

experience on the 

web. Start there 

The reason I like this approach is that it makes 
it easy to style radio and checkbox controls 
independently of other input types, without having 
to resort to attribute selection (which doesn’t work 
in some older browsers): 

input { /* styles for normal inputs 7 } 

label input {/* styles for radios & checkboxes 7} 


When you use the label element, you get two magical 
UX improvements for free: 

1 The label becomes an interactive element that lets 
you focus or activate the associated form control 

2 The label text will be read out to screen reader 
users when the field receives focus 

Both are hugely beneficial, but the former is 
especially helpful for increasing the size of the hit 
target for checkboxes and radio controls for touch- 
based interactions. ► 


* FOCUS ON 


BUTTONS SHOULD 
BE BUTTONS 

|| | In the past, web designers have often groaned at the thought 
™ - of styling buttons. It makes sense: buttons can only 

have text content (supplied using the attribute) and the 

element often injects phantom padding that can be tricky 
to remove. 

Unwilling to accept those limitations, many of us began using 
other elements (@, QQ and so on) to act as buttons, relying 
on JavaScript to trigger form submission. There are numerous 
problems with that approach, however: 

• The QQ element - and and others - is not seen as 
interactive by assistive technology, so it is not normally 
focusable via a keyboard, nor is it exposed as an interactive 
element via a screen reader 

• The Q element is for linking and anchoring within a page, so 
using it to trigger a form submission can confuse users 

• If JavaScript is unavailable or stops working for some reason 
beyond your control - say, if a major ISP blocks jQuery for all 
of its customers - no one can submit the form 

For these reasons (and others), it's best to let buttons be buttons. 

I tend to prefer the element as it can contain other 

elements, but an with a p^ j of or 

is equally nice. And if the phantom padding gets you down, just 
apply (and its vendor-prefixed equivalents) 

in your CSS and everything will be right as rain. 





huffiluffeR 

Sign up 

« I would like in u*r HufldufTrr 1 

By thr way, my namr it 

My email adder* it 

and my wrbdlr it 

and 1 want my 



B ihow prawned 


Filling in Huffduffer uses a simple Mad Libs style for its signup form, encouraging users to 
complete the sentence. It is simple and clear what is required 
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* IN-DEPTH 


ARIA-DESCRIBEDBY 
VS ARIA-LABELEDBY 

I | ARIA (Accessible Rich Internet Applications) supports two 
similar concepts: 'described by' and 'labeled by' (via the 

and attributes, respectively). As they 

are similar, it can sometimes be difficult to choose the appropriate 
option. Thankfully, however, forms offer a great way to illustrate 
the difference: 

<label id="email-laber>Your Email</label> 

<input... aria-labeledby="emair aria-describedby="email-note"> 
<em id="email-note" class="note">We will only use...</em> 

In this rewrite of another example from this article, both attributes 
are in play. The difference in how they end up being used is when 
they are read out. The reference would be read first 

(in lieu of any |g^| associated with the field, explicitly or implicitly), 
then information about the field would be read (^^^| and so 
on), and finally the reference would be read. 

This simple example is good to keep in mind when you are 
considering using these attributes to improve the accessibility 
of your interfaces. 

It's worth noting that more goes into determining the label and 
description than just what I've shown you here. In fact, the W3C 
has outlined a decision tree for determining that value of each of 
these components ( netm.ag/decisiontree-265 ). 

In order of preference, a field's label is one of the following: 

1. The target of 

2. The value of the attribute 

3. The associated |gg| element 

U. The contents of (because people abuse it) 

5. The field's QjQ attribute 

Descriptions come from or 

|yjg, in that order. 


► USE PLACEHOLDER TEXT 

Sometimes it can be useful to provide users with 
a hint about the information you are requesting 
in the field. Most often this takes the form of an 
example you want to show before the user has 
entered any content, but that you want to go away 
when they start typing. 

In the past we often resorted to using JavaScript to 
insert and remove values for the field to accomplish 
this. However, the HTML5 placeholder attribute 
provides that functionality natively. To use it, simply 
supply a value and it will appear in the field when it 
has no value: 

<input placeholder="Johnny Appleseed" ...> 


The placeholder remains when the field is focused, 
and doesn’t disappear until your user starts typing. 
Note: do not use the placeholder attribute in lieu of a 
label . You can visibly hide a label element (using CSS) 
if it is superfluous in the design, but the placeholder 
is not a disappearing label. It is intended to provide 
example content for the field. 

ASSOCIATE HELPER TEXT 

As I mentioned earlier, there are times when we can 
reduce our users’ frustrations by providing helper 
or advisory text for a field. We typically display this 
content next to the field or beneath it in a design. 
That’s useful to sighted users, but it would be useful 
to everyone if it could also be read aloud when the 
field is focused. 

This is a perfect place to use the aria-describedby 
attribute, which is part of the ARIA specification 
(see boxout opposite for more on this). This attribute 
requires a value of one or more id references (similar 
to the for attribute), with multiple values separated 
by spaces: 

<label for="emair>Your Email</label> 

<input id="emaif aria-describedby="email-note"... > 

<em id="email-note" class="note">We will only use your email 
address to respond to your message.</em> 


HIGHLIGHT REQUIRED FIELDS 

In the past, we’ve relied on symbols like the asterisk 
(*) to indicate that a field is required, but HTML5 
gave us a way to do it declaratively, using the required 
attribute. This attribute is a boolean attribute, which 
means including it makes the field required: 

<input required ...> 


This would ensure any browser that implements the 
HTML5 form validation API would not submit the 
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form if there was not a value for this field. Sadly, 
at present, screen readers don’t get this information, 
but there is an ARIA attribute equivalent: aria- 
required . Including this attribute with a "true" value 
will announce that the field is required in the form: 

<input required aria-required="true" ...> 


FLAG UP ERRORS 

Last but not least, when we encounter a form 
submission error, we need to provide the details 
of the error(s), accompanied by quick and easy 
ways the user can fix them. By default, browsers 
that implement the HTML5 form validation API 
will focus the first field with an error and provide 
some basic error messaging based on the type of 
error encountered. 

It is possible to customise those messages using 
setCustomValidityO ( netm.ag/validity-265 ), but I’ll 
leave that for you to explore on your own. Instead, 
let’s focus on how we display server-side validation 
errors. When the server encounters an error with 

It can be useful to give 

users a hint about the 

information you are 

requesting in the field 

a form submission, it’s a best practice to redirect 
the user back to the form, pre-populated with the 
information the user submitted. 

The fields with errors should be indicated in 
some way. It’s common to see the field outlined in 
red to show that there’s something wrong, but I also 
like to include an additional visual indication that 
does not rely on colour. For example, an x in front 
of the label: 

.error labeLbefore { content: "x "; speak: none;} 


This uses generated content in CSS to insert the 
character and tells screen readers (well, future 
screen readers ... it’s not well supported yet) not 
to read it. Of course, just telling someone a field has 
an error is not very helpful. We should provide a 
message indicating why there was an error and/or 
how to fix it. We already have a pattern for advisory 
content like this: 

<input... aria-describedby="email-error"> 

<em id="email-error" class="error-msg">Your email address 
does not appear to be valid. Please double check it.</em> 



Fixing problems The 

Easy-peasy. To cap things off, we can also tell contact form for Retreats 

. . . . c . . _ . 4 Geeks offers a complete 

assistive technology that the field has an error | ist of errors with | inks t0 

by adding the aria-invalid attribute: the field so users can fix 

them immediately 

<input... aria-invalid="true"> 


If you want bonus points for awesomeness, you could 
also aggregate a list of errors at the start of the form, 
with links to each field with an error: 

<div role="alert"> 

<p>There were errors with your form submission:</p> 

<ol> 

<lixa href="#message">Message</a> is required</li> 

<!-- errors continue... --> 

</ol> 

</div> 


There are two UX benefits to this pattern: 

1 Users have a summary of all errors with quick 
access to each field 

2 The role of "alert" tells screen readers to trigger an 
audible chime and then start reading the content 
of this div immediately when the page loads 

GREAT UX BEGINS WITH CONTENT 

By now it should be pretty clear that readability 
can dramatically improve the usability of an 
interface. It’s a pretty simple thing, but when 
we get wrapped up in all of the cool things we can 
do with CSS and JavaScript, it’s easy to forget. 

Hopefully this brief survey of modern HTML 
forms best practices has given you a handful of 
simple, repeatable patterns that you can easily 
integrate into your own work. Your users will 
certainly thank you for it. □ 
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E®AVASCRIPT APIs 

PAGE VISIBILITY 

Aurelio De Rosa explains how this new 
API helps users conserve bandwidth 

O As web developers, we have to pay attention 
to save our users’ resources and bandwidth - 
especially in today’s world driven by mobile devices 
and connections. In the last few years, the W3C and 
the Web Hypertext Application Technology Working 
Group (WHATWG) have standardised many JavaScript 
APIs in order to fill the gap between web and mobile 
apps in terms of the features available. 

Today’s browsers are more capable than ever, 
and with every new release they acquire even more 
powers. One of the aforementioned JavaScript APIs is 
the Page Visibility API ( w3.0rg/TR/page-visibility ). It’s 
a W3C Recommendation that allows site developers to 
programmatically determine the current visibility of 
a document and be notified of visibility changes. 

To understand when to use this API, imagine you 
have an Ajax-driven website that sends a request 
to a server every second, to detect if new data is 
available (yes, I’m talking about polling), and then 


performs a complex operation with it. Considering 
the CPU needed and the cost of some data plans, 
especially on mobile, this process can be expensive 
in terms of both battery consumption and money. 

As long as the user is active on the website, the use 
of these resources is justified. But if the user pushes 
the browser tab to the background, sending a request 
each second is a complete waste. Using the Page 
Visibility API, we can detect the state of the page 
and act accordingly to optimise the resources. 

This API provides two properties, hidden and 
visibilityState , that belong to document. hidden is 
a Boolean whose value is true if the document 
(read ‘the page’) isn’t visible, even its smallest 
part. Typically this happens when the tab is in 
the background or the browser is minimised, with 
some exceptions for accessibility tools that act in 
fullscreen mode. 

visibilityState is an enumeration that specifies the 
current state of the document and consists of the 
following values: 

• hidden : The document isn’t visible at all 

• visible : The document or a part of it is visible 

• prerender: The document is loaded off-screen 
and isn’t visible 

• unloaded : The document is going to be unloaded 

The last two values of the list are optional, so some 
browsers might not support them. Like the hidden 
property, the hidden value has some exceptions 
regarding assistive technologies. 

The Page Visibility API also provides the 
visibilitychange event fired when a change of the 
document’s state occurs. An example of one use, 
which prints on the console the number of times 
the document’s state is visible, is reported below: 

var views = 0; 
function countViewsO { 
if (idocument. hidden) 
console.logCVisit #' + (++views)); 

r 

countViewsO; 

document.addEventListenerCvisibilitychange 1 , countViews); 


This API is supported by the latest version of all 
major browsers, without the need for a vendor prefix. 
The support is excellent on mobile browsers too, 
but in some cases the vendor prefix is still required 
(< caniuse.com/#feat=pagevisibility ). E 3 




Aurelio ( aurelio.oudero.it) is a web developer with a thing for JavaScript 
and HTML5 APIs. His interests include web security, accessibility and 
performance. He's also a regular writer, speaker and book author 
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the files here! 


Download all the files you 
need for this tutorial at 
netm.ag/firebasegit-265 
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BUILD A REAL-TIME 
APR WITH FIREBASE 


q: What's the best thing 
on your desk today? 

a: An iced 'Lulu' - two 
shots espresso, two 
shots raspberry syrup 
and a can of Red Bull, 
on ice 


E) VIDEO 


Lukas Ruebbelke has 
created an exclusive 
screencastto go with 
this tutorial. Watch 
along at netm.ag/ 
firebasevid-265 


Lukas Ruebbelke shows you how to take an AngularJS application 
and give it real-time capabilities using AngularFire 


© Imagine connecting an AngularJS application 
to a fully functional backend in a matter of 
minutes. Now imagine every client connected to your 
app would reflect changes to your data in real time. 
We are going to do exactly that, by taking an existing 
AngularJS leaderboard application, which only stores 
data in memory on the frontend, and converting it 
into a real-time web app using Firebase ( firebase.com ). 

THE LEADERBOARD 

First, let’s look at how the static version of the 
leaderboard works. Our leaderboard consists of two 
main parts: the admin dashboard (where we manage 
contestant data) and the leaderboard (where we 
display contestant data in real time). 

The leaderboard application consists of an 
AngularJS service called ContestantsService and a 
controller named MainCtrl . The MainCtrl delegates 
all operations that manipulate the contestants 
collection to the ContestantsService . This means 
when we add Firebase functionality to our 
application, all our changes will be contained in 
the service and nothing else needs to change. 

Displaying contestants 

WeTl start with displaying contestants’ data. In 
our ContestantsService we have created a contestants 
collection that we are making available via the 
service.getContestants method. 

app.serviceCContestantsService’, function () { 
var service = this; 
var contestants = [ 


{id: 1, lane: 1, name: ’Contestant 01’, score: ’10’}, 
{id: 2, lane: 2, name: ’Contestant 02’, score: ’15’}, 
{id: 3, lane: 3, name: ’Contestant 03’, score: ’20’} 

]; 


service.getContestants = function () { 
return contestants; 

}; 

}); 


Now we have access to the contestants collection, 
we will inject ContestantsService into the MainCtrl 
and assign the return value of ContestantsService. 
getContestants to main.contestants . 

We are also initialising an empty contestant 
object to main.newContestant , which we will use 
to bind the new contestant form to. 

// We are using the controllers syntax 
app.controllerCMainCtrl', function (ContestantsService) { 
var main = this; 

main.newContestant = {lane: ", name: ", score: "}; 
main.contestants = ContestantsService. getContestantsO; 

>h 


With contestants available on our controller, we can 
use ngRepeat to display our contestants in a table. 

<tr ng-repeat="contestant in main.contestants'^ 
<td>{{contestant.lane}}</td> 
<td>{{contestant.name}}</td> 
<td>{{contestant.score}}</td> 

</tr> 
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The leaderboard page is actually a subset of 
the admin dashboard, which allows us to use 
the same controller for both views. 

Adding a contestant 

In our dashboard, we will add a form that will allow 
us to add a new contestant. We are showing one input 
- to update the contestant’s lane - but the format is 
the same for the contestant’s name and score. 

Here, we have a text input field that uses ngModel 
to bind to a property of main.newContestant.lane . 

We have also added ngSubmit, which calls main. 
addContestant when the form is submitted: 

<form class= M form-inline" role= M form M 
novalidate ng-submit= M main.addContestant() M > 

<div class= M form-group M > 

<input type= M text" class="form-contror 
ng-model= M main.newContestant.lane M 
placeholder="Enter lane M > 

</div> 

<!-- The rest of the form --> 

<button type= M submit" class= M btn btn-default">Add</ 
button> 

</form> 


When main.addContestant is called, a copy of main. 
newContestant is passed on to ContestantsService. 
addContestant and main.newContestant is reset. 

The leaderboard page 

is a subset of the admin 

dashboard, so we can 

use the same controller 


Race to Awesome 

Lane Contestant Score 

4 Speedy Gonzalez 6 

5 Lukas Ruebbelke 4 


Remove 

Remove 


Add Contestant 

Contestant Name 

Contestant Score 

Add 

Race to Awesome 

Score 

6 
4 


Lane Contestant 

4 Speedy Gonzalez 

5 Lukas Ruebbelke 


Updating a contestant 

Updating a contestant is slightly simpler in the 
static version of the leaderboard, as updates to the 
contestant object are immediately stored in memory. 
In the dashboard, we will replace the simple binding 
in the table cell to a text field that we will bind to 
that property on the contestant. 

For instance, the markup below: 


Leaderboard When a user 
updates a contestant in 
the dashboard view, that 
change is immediately sent 
to everyone connected to 
the leaderboard view 


<td>{{contestant.lane}}</td> 


main.addContestant = function () { 

ContestantsService.addContestant(angular.copy(main. 
newContestant)); 

main.newContestant = {lane: ", name: ", score: "}; 


... will become: 

<tdxinput type="text" 
ng-model="contestant.lane" 

ng-blur="main.updateContestant(contestant) 7 x/td> 


In the static version of the leaderboard, service. 
addContestant creates a fake id based on the current 
time and uses that id to add the new contestant to 
the contestants collection. I would not recommend 
using this method in a real application, but it will 
serve its purpose until it gets hooked up to Firebase. 

service.addContestant = function (contestant) { 
contestant.id = new Date().getTime(); 
contestants.push(contestant); 


We are using ngBlur to call main.updateContestant with 
the contestant we are updating, which then gets 
passed on to ContestantsService.updateContestant. 

main.updateContestant = function (contestant) { 
ContestantsService.updateContestant(contestant); 

}; 


We are not actually going to do anything in service. 
updateContestant yet, but it will come in handy in just 
a moment. 
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* FOCUS ON 


ANGULARFIRE 

CHEATSHEET 


ja AngularFire is the officially supported Firebase library 
” that allows us to bind an AngularJS collection to a Firebase 
endpoint. AngularFire enables our AngularJS collections to be 
seamlessly kept in sync with the Firebase services. It also provides 
an easy to use API for modifying the remote collection so that all 
other connected clients are updated. 


• Read items 

• Create 

• Update 

• Delete 


= $firebase(new Firebase(FIREBASE_URI)).$asArray() 


items.$add(item) 


items.$save(item) 


items.$remove(item) 


Jfirebase 


Once an AngularJS collection has been initialised with the | 
service, there is an implicit read relationship in that the collection is 
automatically kept in sync with the Firebase servers. To modify the 
collection, we must explicitly perform those operations using the 
AngularFire API, which allows us more granular control over how 
we update the servers. 

You can read more about the library at netm.ag/cheatsheet-265. 



The big picture In this application, we have a dashboard and leaderboard view that uses the 
MainCtrl, which gets contestants data from the ContestantsService 


service.updateContestant = function (contestant) { 
// Already in memory 

}; 


Removing a contestant 

The final piece of the application we need to talk 
about is the ability to remove a contestant. In the 
dashboard, we have an extra column that we will 
use to add a button that calls main.removeContestant 
with the contestant we want to delete. 

<button type="button" class="btn btn-link" 
ng-click= M main.removeContestant(contestant)">Remo 
ve</button> 


The main.removeContestant method then passes that 
contestant on to the ContestantsService.removeContestant 
method. 

main.removeContestant = function (contestant) { 
ContestantsService.removeContestant(contestant); 

}; 


We can now use 
Sfirebase to fetch a 

real-time collection 

of our contestants 


This is service.removeContestant uses the contestant.id 
property to remove it from the collection. 

service.removeContestant = function (contestant) { 
contestants.remove(function(c) {// Sugar.js method call 
return c.id === contestant.id; 

}); 

}; 


We have now laid the foundation for the AngularJS 
portion of the application - this is where the fun 
begins! In the next few moments, we are going to see 
how easy it is to convert our static leaderboard, with 
mock data and service methods, into an application 
with real data that updates in real time. 

Setting up a Firebase account 

The very first step to creating a Firebase application 
is setting up a free Firebase account at firebase.com. 
Next, we need to create a Firebase app instance for 
our application. From the account page, this will be 
the first form you see. You just need to give your app 
a name and hit ‘Submit’ to generate your example 
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and generate a URL based on that application name. 
Next, we need to add the appropriate resources to 
our new project. 

We will add in the base firebase.js file and the 
angularfire.min.js library to our leaderboard. The 
firebase.js file is responsible for managing the 
synchronisation between the client and server and 
AngularFire is the official support library for binding 
an AngularJS app to a Firebase collection (see boxout 
opposite). 

<script src=7/cdn.firebase.com/js/client/2.1.0/firebase. 
js"x/script> 

<script src=7/cdn.firebase.com/libs/angularfire/0.9.1/ 
angularfire.min.js"></script> 


With the appropriate resources added, we need to 
add the firebase submodule to our application. 

var app = angular.module('leaderboard', ['firebase']); 


APP NAME 


CREATE NEW APP 


New application To create 
a new Firebase application, 

ngRepeat . We can return our contestants collection simply enter in a new 

just as before, and the leaderboard will continue 

Firebase dashboard and 

tO Work! hit 'Create new app' 

service.getContestants = function () { 
return contestants; 

}; 


One other thing that I like to do is extract that 
Firebase endpoint into a constant so that it can be 
defined once and referenced throughout the entire 
application. 

app.constant('FIREBASE_URI', 'PUT_YOUR_FIREBASE_ 
HERE'); 


Adding a contestant 

Using $asArray gives us an array to bind to, but we 
need to use special Firebase methods if we want to 
manipulate the collection. 

To add a new contestant, we call $add on the 
contestants collection and pass in the new contestant. 


REAL-TIME SERVICE 

The stage is now set for us to convert ContestantsService 
from a static service into a mechanism with real time 
capabilities. The impressive part is that we will have 
spent significantly more time establishing context 
than actually wiring the leaderboard up to Firebase. 

We are going to replace the static contestants 
collection with a real-time collection that lives in 
the Firebase servers. 

To do this, we need to inject the $firebase service 
as well as the FIREBASE_URI constant we created. 

app.factoryCContestantsService', function ($firebase, 
FIREBASE URI) 


Within the service, we are going to initialise a new 
Firebase reference using the endpoint to the Firebase 
application we just created. 

var ref = new Firebase(FIREBASE_URI); 
var contestants = $firebase(ref).$asArray(); 


We can now use the Jfirebase service to fetch a real¬ 
time collection of our contestants by passing in the 
Firebase ref we just created. The $asArray method 
returns a read-only array that we can use with 


service.addContestant = function (contestant) { 
contestants.Jadd(contestant); 

}; 


Updating a contestant 

Updating a contestant works almost in an almost 
identical way to adding a contestant, except we call 
$save instead of $add . 

service.updateContestant = function (contestant) { 
contestants.$save(contestant); 

}; 


Removing a contestant 

This may come as a big surprise, but removing 
contestant is just like the adding and updating 
a contestant, except we use the {remove method 
and pass in the contestant we want to remove. 

service.removeContestant = function (contestant) { 
contestants.$remove(contestant); 

}; 


Did we really just give a regular AngularJS application 
real-time capabilities in less than 10 lines of code? 
Yeah we did! □ 


E) RESOURCE 

REMOTE MOBILE 

Lukas Ruebbelke has 
created an additional 
view for a mobile 
device. It works as a 
remote, enabling users 
to alter an athlete's 
score on the go. Find it 
in the GitHub repo at 
netm. ag/firebasegit-265 
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PUBLISH MOBILE GAMES 
WITH C0G00NJS 


Anton Mills shows you how to publish Phaser games to Android 
mobile platforms using native application wrapper CocoonJS 


^RESOURCE 


CocoonJS has some 
great code examples 
available on howto use 
the platform's features. 
You can find them 
at github.com/ludei/ 
cocoonjs-demos 


O Mobile gaming using HTML5 Canvas has come 
a long way over the past 18 months. It’s an 
exciting time in the industry as it has given app 
and game developers a new platform to create 
content for, and as a result a wide range of 
frameworks have been launched to help developers 
create better applications. There are now a range of 
HTML5 game frameworks, such as Crafty, melonJS, 
Impact and - one of the most prominent at present 
- Phaser ( phaser.io ). 

One of the downsides of browser-based games 
on mobile platforms is speed. The browser limits 
the game’s memory use and processing speed. Cue 
CocoonJS from Ludei ( ludei.com/cocoonjs ), a platform 
that allows your browser-based applications to sit 


in a wrapper-like native application very similar to 
PhoneGap and Cordova. CocoonJS features Canvas/ 
a Canvas-based rendering technology giving 
mobile game developers who use HTML5 Canvas 
a significant speed increase for mobile. Very cool. 

GETTING STARTED 

Let’s begin by taking a look at the source files at 
netm.ag/CocoonGit-265. In the root of the project 
you will find several folders, including: 

• ‘source-imagery* - includes the PSDs for 
the graphics 

• ‘article-steps* - contains the source for each 
of the individual steps, for easy reference 
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® ® @ .netmag - Coccoon.js x __ 

<- CD local host: 8080 

::: Apps O Radiohead - Karma o eugenioclrc/phasei O John Mayer - Drear 3 Amazon.com: 



Project Folders 

• Working Pro j ect 

• Completed Project 

Article Steps 

. Step_l.- Player 

• Step 2 - Firing 

• Step 3 - Enemies 

• Step 4 - Collisions 


Tutorial steps This is the main listing page which you can find at http:// 
localhost:8080. It's a handy way to see each step of the tutorial 


• ‘completed-project* - contains the final source 
for the project 

• ‘working-project* - this is the folder you’ll be 
working within 

You may also notice that the project contains 
a file called ‘gulpfile.js’. We’re using Gulp for 
two elements of this project: to prepare a web 
server so we can test our game as we develop it, 
and to prepare a ‘game.zip’ of the files we need 
to upload to Ludei’s servers for compilation. If 

Canvas+ gives 
devs using HTMLs 

Canvas a speed 
increase for mobile 


you’re new to Gulp, head over to gulpjs.com for 
usage instructions. 

Let’s take a peek at the completed project. Open 
a terminal in the downloaded projects directory and 
type ‘gulp’. This will create a web server you can 
see by opening a web browser and visiting http:// 
localhost:8o8o. Click on the ‘Completed Project’ link 
to see the game running. The controls are the arrow 
keys, and you use the space bar to fire. 

EMULATING MOBILE 

While developing for mobile it’s best to have the 
browser emulate a mobile device. In Chrome you 
can achieve this by going to View > Developer 
> Developer Tools . Look for the mobile device icon 
in the Developer Tools panel that opens to emulate 
a mobile device. For this particular project, let’s ► 


* IN-DEPTH 


C0C00NJS SHOWCASE 


^| CocoonJS gives your HTML5 Canvas-based applications 
^ f fantastic speed increases when publishing for mobile 
platforms. If you type Ludei into the Apple App Store or Google 
Play, you will find its Tic-Tac-Toe game, as well as WebGL examples 
in its LudeiWebGL app - Canvas doesn't just mean 2D games and 
applications. 

When playing these games, it's really hard to tell they are built 
with web technologies, and it's testament to not only how far 
web technology has come, but also the strength of the CocoonJS 
platform to be able to package the games up in a native application 
wrapper with such excellent performance. You can see more 
examples of the games built with CocoonJS from third-party 
developers at ludei.com/showcose/ 

Remember, this article was written with game development in 
mind, and I specifically focused on Phaser because at the moment 
this is an extremely well-developed game development framework, 
but you can create any kind of Canvas-based application and use 
any framework that works directly with Canvas. As you've seen 
in this tutorial, you can develop locally, emulating a mobile with 
your Google Chrome or Firefox browser. You can be reasonably 
confident it will work when it is running with CocoonJS, and because 
of Cocoon's great Launcher system, it can be ported to mobile in 
minutes - saving a lot of compiling and publishing time. 
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* FOCUS ON 


FEATURES. 

FEATURES. FEATURES 

j§| a We've only really begun to scratch the surface of CocoonJS 
with this tutorial. The platform itself comes with many 
features and APIs, including: in-app purchases, advertising, Virtual 
GamePad, location-based services, motion through sensors 
and gyroscope, multi-touch, notifcations, vibration, application 
analytics, Facebook integration, App Store integration and Google 
Play integration, just to name a few! 

There are APIs that allow you to interact with the mobile 
device's hardware itself, as well as convenience functions for 
rapid integration to various stores and social networks. It is 
worth noting that not all these features are available without 
going through the web-based application to become a Premium 
User. However, the great news is that at the moment there is no 
additional cost, and the application is just four text fields to fill out 
and only takes about five minutes to complete. So get in early to 
test out its wonderful features! 

This article has been entirely focused on creating game content 
for the Android platform, but CocoonJS is capable of reaching a lot 
of other platforms - such as iOS, Windows, Mac, Nook, Blackberry, 
Firefox Marketplace, Google Chrome Web Store, Tizen, Facebook 
Apps, Ouya and more. All of this is possible from Ludei's cloud- 
based compiler, which takes the stress out of creating content for 
all these platforms by allowing developers to easily upload their 
content in a zip file, then sending an email with their content neatly 
packaged in an app in their chosen format. Magic! 

For more information, check out the CocoonJS features page 
( ludei.com/cocoonjs/features /). It will not only provide more detailed 
information about each topic, but also sample code and some video 
content to help you get started with the features. 


ludei 



New features The features page is an excellent place to quickly see just how 
much CocoonJS offers developers 


specify 1920 x io8opx as the screen resolution at 
the top of the browser window and then refresh 
your browser. That looks much better! 

Pve created a gulp task that prepares a zip file 
of our content which will be uploaded to Ludei 
for compilation. Let’s test this now. Open a new 
command window (remembering the other window 
is still running the web server) and change to your 
project directory. It should have the gulpfile.js 
inside of it. Run the command gulp preparezip- 
completed . All being well, you should see ‘Started’ 
and ‘Finished’ prompts. You should also now see 
a ‘game.zip’ in the folder - this is the packaged file 
ready for deployment to CocoonJS. 

USING COCOONJS 

It’s time to head on over to ludei.com/Cocoonjs 
and create an account. Once logged in, head to 
the ‘Dev Portal’. In this section we’re going to create 
a project. Hit the ‘New Project’ button, make sure 
‘CocoonJS’ is ticked, and give your project a name. 

The next entry is to assign your app a Bundle 
ID - this is a unique identifier used in various 
application marketplaces such as the App Store. 

The best practice for Bundle IDs is to choose a 
reverse domain name (for example, com. 
yourname.gamenamehere). 

Give your project a version number of ‘1’. For the 
Scale Method , select Scale Aspect Fit for both 
the game and the splash screen. Hit Create Project 
and you will be taken to the ‘Compile Project’ 
screen, but let’s skip this and take a look at 
creating a Launcher. 

CREATING A LAUNCHER 

A Launcher is an empty app that allows you to 
switch its contents on the fly, and save a lot of 
compiling time. While in development mode on 



Emulation mode The SpaceWars title screen running in Chrome's mobile 
emulation mode - its handy to develop with this turned on 
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any project, Launchers are invaluable. Click on 
the ‘Compile Launcher’ item from the left-hand 
sub-menu and choose your development platform 
(I’ve opted for ‘Google Play Store - Android’ for 
this tutorial). 

Tick the box, hit the ‘Create Launcher’ button and 
Ludei will compile a launcher with your previously 
entered settings and you will be sent a download 
link. In the case of Android, you will be sent a zip file 
with a signed and unsigned APK file to install to your 
device. Opt for the signed version and install it as 
you would any other application. 

Run the Launcher app and log in with your 
Ludei credentials. You will be greeted with 
a window that requests a URL for the ‘game.zip’ 
we prepared earlier. At this point, it’s entirely 
up to you if you want to host the game.zip file 
somewhere accessible. 

As a tip, if your mobile device and your laptop 
are on the same network and you still have the Gulp 
web server running, you can use something like: 
http://192.168.0.2:8080/game.zip where 192.168.0.2 
is your laptop’s IP address. 

A Launcher is an 
empty app that allows 

you to switch its 
contents on the fly 

Once you’ve entered the URL to the game.zip, 
press the ‘Canvas+’ button and this will deploy 
your ‘game.zip’ to the CocoonJS launcher and the 
game should spring to life. 

As we continue with this tutorial we will use 
this method to deploy our progress to the device, 
the only difference being that we will work within 
the ‘working-project’ folder. Now, when we want 
to compile, we use the command gulp preparezip- 
working and this will compile the contents of the 
‘working-project’ folder instead of the ‘completed- 
project’ one. 

The working-project folder already has the 
basics of what we need to start. If you deploy this 
now using gulp preparezip-working you can see a 
Phaser logo bouncing around your screen. Reloading 
your mobile device with the newest ‘game.zip’ is 
pretty simple: 

• Press the ‘FPS’ text at the top-left of your screen 

• Hit the ‘Actions’ button at the top-right 

• Hit ‘Reload’ - this will grab the contents of the 

newest ‘game.zip’ 



Placeholder The default 
state of the 'Working- 

It s a pretty quick way of compiling and testing your project' folder is a Phaser 

work as you develop your games - neat huh? 

perfect placeholder project 
to build upon 

PLAYER 

Copy the ‘index.html’ file from the folder called 
‘l-player’ in the ‘article-steps’ directory, and paste 
it in to the ‘working-project’ folder, replacing the 
existing ‘index.html’. We’ll repeat this process for 
each step. 

Now let’s take a look at the new source code. 

Near the bottom of the page we have our Phaser 
boilerplate that sets the game up. We have added 
a method called initlntro , which creates an intro 
screen image and when clicked, calls initGame . 

InitGame has two objectives: 

• It creates the interface that (for now) hides the 
intro image and handles click events (note the 
hiddenFireButton that allows the right-hand side 
of the screen to act as a ‘fire’ button) 

• The second objective is to invoke the 
initGameObjects method which sets up the arcade- 
style physics, adds a background image, adds the 
player’s ship and lastly animates it from the left 
of the screen 

The update method is run every frame and checks 
for both keyboard input and for touch events, game, 
input.pointerl is the first touch event for mobile. If 
it is down (i.e. the user is touching the screen) it 
moves the player vertically towards that position. 

Feel free to deploy this step’s source to your device 
to test. ► 
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Compiling for mobile Compiling the game for mobile is easy with the CocoonJS platform 


^ FIRING 

Copying the index.html from ‘Step 2 - Firing’, we 
can see two new variables added ( groupPlayerLaser 
and fireTime ), and we’re adding a new image in the 
preload method. In the initGameObjects method we 
have added groupPlayerLaser . This is an object-pool 
- a group of objects that can be reused. We’ve set 
the pool size to 40 and set each laser to respond to 
physics and to die when it leaves the screen. 

The fireLaser method has been developed further. 
It now grabs a laser from the groupPlayerLaser object- 
pool , fires it towards the right side of the screen 
and adds a delay using fireTime to stop repeat firing. 


• Generates a random number to determine 
if the enemy should fire at the player or not 

• If it does, it calls the createEnemyFire method 

At this point it should be feeling a lot more like 
a game, but we still need to add some collisions. 

COLLISIONS 

The last step we’ll cover is ‘Step 4 - Collisions’. 

In this step we have added an explosions variable, 
and in the preload there is a new image called 
‘kaboom’. You might notice this is a spritesheet 
- an animation that will play when a collision 
happens. In the initGameObjects methods there is 
yet another object-pool called explosions , which 
defines the explosion animation. 

In ‘update’ there are three collision checks: 
enemy/player, enemy/laser and laser/player. For 
each collision, check there is a method invoked 
when the collision has occurred. Each one of 
these methods usually calls kill() on the colliding 
objects, and if the player is to be reset it invokes the 
loseLife method. loseLife simply clears all objects 

For each collision, 
check there is a method 

invoked when the 
collision has occurred 


^RESOURCE 


This article is focused 
on Android and 
Phaser, but other JS 
game development 
frameworks are just 
as easy to work with. 
Here's a great iOS 
and Kiwi.js example: 
netm. ag/kiwi-26 5 


ENEMIES 

In the third folder, ‘Enemies’, we’ve added the 
variables groupEnemy and groupEnemyLaser , which 
are two more object-pools . enemyTime and 
difficultyOffset are both timers that handle the 
delay of enemy spawning and the ‘difficultyOffset’ 
increasingly diminishes, meaning enemies spawn 
more often as the game progresses. 

In the preload method enemy and enemyLaser 
images have been added to the preload queue, and 
we’ve added the enemy and groupEnemyLaser object- 
pool creation to the initGameObjects method. It’s 
almost a complete copy of the groupPlayerLaser object- 
pool we created in the previous step. 

In the updated method there is a new tick against 
the enemyTime and Phaser game timer that calls 
the new createEnemy method if 200ms has passed. 
createEnemy is a new method written that: 

• Gets an enemy from the object-pool 

• Places it at the right side of the screen at 
a random height 

• Sets its velocity to move it towards the player 


off the screen, moves the player to the left side 
and animates it to a normal position to create the 
impression of starting again. It also calls 
createExplosion . This method places an explosion 
animation on the screen at a given X and Y position, 
and a scale factor to add some variety. 

That’s essentially it for the core game mechanics. 
In the ‘completed-project’ folder I’ve added in 
scores, lives and a ‘game over’ screen for you to look 
at if you’d like some inspiration on how to elaborate 
on the mechanics yourself, and create your own 
version of the game. 

Once you’ve tested this on your device, you are 
ready to log back in to Ludei, select your project 
and click on the Compile Project link. Here you can 
customise your app icons by selecting the individual 
platform sections and uploading your own. 

You will also be asked to upload your final ‘game, 
zip’ and choose the platforms you are publishing 
to. You will be sent an email with the compiled 
applications for each of the platforms. It’s a great 
publishing platform - I hope you enjoy working 
with it! □ 
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^ACCESSIBILITY 


FOCUS-FRIENDLY 

Ian Pouncey gives his three simple steps to ensuring your 
site is keyboard-accessible and keyboard-usable 


O One of the best things you can do to improve 
the accessibility of any site is to make sure it 
is both keyboard-accessible and keyboard-usable. 
There are a few simple steps you can follow to help 
ensure this is the case. 

First, use natively accessible elements (buttons, 
other form controls, links) for all interactions. Even 
if you take no further steps, it is now possible for 
keyboard users to access every control on your site. 

Second, define a :focus style that distinguishes 
an element from its default state. It’s important 
keyboard users know which element currently has 
focus. The mantra to follow is ‘Focus First’. When 
writing CSS, write the :focus style first, and when 
designing, refer to focus instead of hover styles. 

Finally, for more complicated interactions like 
a carousel or tab panel, manage keyboard focus 
appropriately. Usually when activating a tab or a 
‘next’ button in a carousel, you want to set the focus 
on the newly revealed content, so keyboard users 
don’t have to tab through to interact with it. The key 
is to use the focusf) method as follows: 

document.querySelectorftarget element 1 ).focus(); one two 
three four five 


This will only set focus on natively focusable 
elements, however. To focus on other elements, 


a <div> or <span> for example, you’ll need a 
tabindex . Adding tabindex="-1" to an element means 
it becomes focusable using the focusf) method, but 
can’t be tabbed to. I like to use a helper function to 
manage this for me: 

function setFocus (el) { 


if (el) { 


// check element is not a natively keyboard 
accessible element 


if (!/ A (?:a|select|input|button|textarea)$/i.test(el. 
tagName)) { 


el.tabindex = -1; // set tabindex to -1 


} 


el.focus(); // set focus on the element 


return el; // return original element to enable method 
chaining 


} 


} 


It is called with: 

var targetElement = document.querySelectorftarget 
element 1 ); 


setFocus(targetElement); 


And there you have it, three steps to hassle-free 
keyboard accessibility. EH 


Ian is a web developer and senior accessibility specialist at 
the BBC. He (occasionally) blogs at ionpouncey.com and tweets 
at @lanPouncey 
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